Přiřazení dat do polí na otevření dialogové okno v vuetify

Question 1

Vytvořil jsem dialogové okno pomocí vuetify a chci, aby to předvyplní se údaje v v-vyberte, ale je to prázdné, když jsem otevřít dialogové okno modální. Jsem přidělen propPackage k selectPackage který je používán v v-model v v-select. Jak bych měl předvyplní to, když otevřu okno?

Dialogové okno

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" max-width="600px" @click:outside="close">
       <v-select
         :items="['Basic', 'Standard', 'Premium']"
          label="Package*"
          required
          v-model="selectPackage"
          ></v-select>
          <v-btn @click="close"> Close </v-btn>
    </v-dialog>
  </v-row>
</template>

<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      required: false,
      default: false,
    },
    propPackage: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    selectPackage: this.propPackage,
  }),
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

Nadřazené součásti

<template>
 <v-btn @click="bookDialog('Basic')"></v-btn>
 <form-modal :dialog="openDialog" @close="close" :propPackage="propPackage" />
</template>
<script>
import FormModal from "@/components/FormModal.vue";
export default {
  components: {
    FormModal,
  },
  data: () => ({
    openDialog: false,
    propPackage: null,
  }),
  methods: {
    bookDialog(val) {
      this.propPackage = val;
      this.openDialog = true;
    },
    close() {
      this.openDialog = false;
    },
  },
};
</script>

Question 2

Zkontrolujte, zda tento codesandbox jsem udělal: https://codesandbox.io/s/stack-70077413-943o6?file=/src/components/FormModal.vue

Hlavní problém je, že se snažíš přistupovat k prop hodnoty přímo na vašem datovém bloku:

    data: () => ({
       selectPackage: this.propPackage,
    }),

V tomto případě by bylo lepší dostat prop hodnota nastavením watcher místo, stejně jako je tento:

    data: () => ({
      selectPackage: ''
    }),  
    watch: {
      propPackage(val) {
        // Be sure to validate default values
        if(val !== '') {
          this.selectPackage = val
        }
      }
    },

Tímto způsobem, můžete také ověřit prop hodnota, pokud budete potřebovat.

Přidal jsem pár komentářů v codesanbox na věci, které byste mohli zlepšit. Od FormModal složka funguje především jako dialogové okno, můžete použít "hodnota" prop a nastavit vypočítaný majetek, aby mohli zavřít dialogové okno přímo z podřízené složky, tímto způsobem se vyhnete vyzařují @blízko události do nadřazené složky a prop mutace varování.

Question 3

Vzhledem k tomu, pomocí kláves funkcí pro datový oddíl, this.propPackage bude definován od this nebude odkazovat na vue stupně. Můžete opravit, že v 2 způsoby:

Změna šipky funkce ES6 zápis v dialogovém okně součásti:
```
data() {
   selectPackage: this.propPackage,
},
```
Průsmyk vue instance jako parametr šipka funkce a přístup k prop pomocí:
```
data: (instance) => ({
   selectPackage: instance.propPackage,
}),
```

Jakmile si naplnit své selectPackage vlastnost data správným způsobem, vaše v-select bude naplněna hodnota, jakmile si otevřete dialogové okno.

cmfc31 · Answer 1 · 2021-11-24T17:37:04

Zkontrolujte, zda tento codesandbox jsem udělal: https://codesandbox.io/s/stack-70077413-943o6?file=/src/components/FormModal.vue

Hlavní problém je, že se snažíš přistupovat k prop hodnoty přímo na vašem datovém bloku:

    data: () => ({
       selectPackage: this.propPackage,
    }),

V tomto případě by bylo lepší dostat prop hodnota nastavením watcher místo, stejně jako je tento:

    data: () => ({
      selectPackage: ''
    }),  
    watch: {
      propPackage(val) {
        // Be sure to validate default values
        if(val !== '') {
          this.selectPackage = val
        }
      }
    },

Tímto způsobem, můžete také ověřit prop hodnota, pokud budete potřebovat.

Přidal jsem pár komentářů v codesanbox na věci, které byste mohli zlepšit. Od FormModal složka funguje především jako dialogové okno, můžete použít "hodnota" prop a nastavit vypočítaný majetek, aby mohli zavřít dialogové okno přímo z podřízené složky, tímto způsobem se vyhnete vyzařují @blízko události do nadřazené složky a prop mutace varování.

Toodoo · Answer 2 · 2021-11-24T06:11:25

Vzhledem k tomu, pomocí kláves funkcí pro datový oddíl, this.propPackage bude definován od this nebude odkazovat na vue stupně. Můžete opravit, že v 2 způsoby:

Změna šipky funkce ES6 zápis v dialogovém okně součásti:
```
data() {
   selectPackage: this.propPackage,
},
```
Průsmyk vue instance jako parametr šipka funkce a přístup k prop pomocí:
```
data: (instance) => ({
   selectPackage: instance.propPackage,
}),
```

Jakmile si naplnit své selectPackage vlastnost data správným způsobem, vaše v-select bude naplněna hodnota, jakmile si otevřete dialogové okno.

v podobě dialogu je namontován spolu s mateřskou složku, která je proč to není přiřazena. Jak bych to mohl vyřešit?
jo nedostane přidělen vzhledem k oběma dialog a mateřská komponenta pro montáž na dom zároveň
kdybych přiřadit propPackage: 'Basic' v vlastnosti data pak to funguje, ale to nebude fungovat, když jsem v metody, jako je bookDialog(val){ this.propPackage=val; this.openDialog=true
Pokud budete chtít více pomoc, můžete se reprodukce pískoviště na codesandbox.io a budu se snažit vyřešit váš problém.
codesandbox.io/s/svatý-hory-76qu8?file=/src/komponenty/... vytvořil tento codesandbox. říká Invalid prop: type check failed for prop "propPackage". Expected String, got Null i když jsem prošel "Základní"

Přiřazení dat do polí na otevření dialogové okno v vuetify

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii