vue.js - 在 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

检查我制作的代码和框:https://codesandbox.io/s/stack-70077413-943o6?file=/src/components/FormModal.vue

主要问题是您尝试直接访问数据 block 上的 prop 值:

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

在这种情况下，最好通过设置一个观察者来获取 prop 值，就像这样:

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

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

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