Vuetify打开对话框时如何为v-select字段预填充数据

问题根因 #

子组件的data仅会在组件首次初始化时执行一次赋值，此时父组件传入的propPackage初始值为null，后续父组件更新propPackage的取值时，子组件本地的selectPackage不会自动同步更新，因此v-select绑定的值始终为初始的空值，导致显示空白。

解决方案 #

下面是三种常用的修复方案，按需选择即可：

方案1：监听prop变化自动同步 #

在子组件新增watch侦听器，监听propPackage的变化，变更时自动更新本地的selectPackage：

<!-- 子组件script部分修改 -->
<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      required: false,
      default: false,
    },
    propPackage: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    selectPackage: '',
  }),
  watch: {
    // 监听propPackage变化，实时同步到本地变量
    propPackage: {
      immediate: true, // 初始化时也执行一次赋值
      handler(val) {
        this.selectPackage = val
      }
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

方案2：弹窗打开时同步值 #

因为仅需要在弹窗打开时同步最新的选项值，可以监听dialog的变化，弹窗打开时再赋值，性能开销更低：

<!-- 子组件script部分修改 -->
<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      required: false,
      default: false,
    },
    propPackage: {
      type: String,
      required: true,
    },
  },
  data: () => ({
    selectPackage: '',
  }),
  watch: {
    // 弹窗打开时同步最新的套餐值
    dialog(newVal) {
      if (newVal) {
        this.selectPackage = this.propPackage
      }
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

方案3：用计算属性替代本地变量（适合需要回传选择结果的场景） #

如果选择完套餐后需要把值同步回父组件，直接使用带get/set的计算属性，不需要额外维护本地变量：

<!-- 子组件script部分修改 -->
<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      required: false,
      default: false,
    },
    propPackage: {
      type: String,
      required: true,
    },
  },
  computed: {
    selectPackage: {
      get() {
        return this.propPackage
      },
      set(val) {
        // 选择后直接把值emit回父组件更新
        this.$emit('update:propPackage', val)
      }
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

使用这个方案时父组件的prop绑定要加.sync修饰符：

<!-- 父组件引用子组件的地方修改 -->
<form-modal :dialog="openDialog" @close="close" :propPackage.sync="propPackage" />

内容的提问来源于stack exchange，提问作者deadbeforesunlight