在 vuetify 中打开对话框时将数据分配给字段

Question

我使用 vuetify 创建了一个对话框，我希望它预先填充 v-select 中的数据，但是当我打开对话框模式时它是空白的。我已将 propPackage 分配给 selectPackage，后者在 v-select 中的 v-model 中使用。打开对话框时应该如何预填充它？

对话框

<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>

父组件

<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>

Answer 1

由于您在数据部分使用箭头函数，this.propPackage 将是未定义的，因为 this 不会引用 vue 实例。您可以通过两种方式解决该问题：

将对话框组件中的箭头函数更改为 ES6 表示法：
```
data() {
   selectPackage: this.propPackage,
},
```
将 vue 实例作为参数传递给箭头函数并使用它访问你的道具：
```
data: (instance) => ({
   selectPackage: instance.propPackage,
}),
```

一旦您以正确的方式填充 selectPackage 数据属性，您的 v-select 将在您打开对话框后填充该值。

Answer 2

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-70077413-943o6?file=/src/components/FormModal.vue

主要问题是您试图直接在数据块上访问 prop 值：

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

在这种情况下，最好通过设置观察者来获取道具值，就像这样：

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

这样，您还可以根据需要验证道具值。

我在 codesanbox 中添加了一些您可以改进的评论。由于 FormModal 组件主要用作对话框，您可以使用 'value' 属性并设置一个计算的属性为了能够直接从子组件关闭对话框，这样可以避免向父组件发出 @close 事件和道具突变警告。

在 vuetify 中打开对话框时将数据分配给字段

Assigning data to fields on opening dialog in vuetify

vue.js

vuejs2

vuetify.js