如何使用选定的值初始化选择？

Question

我有一个调用子组件的父组件。

父母：

<select-school-type class="form-control" required value="this.school_type_id" @selected="changeSchoolTypeId">></select-school-type>

孩子：

<select v-on:change="$emit('selected', $event.target.value)" v-model="value">
      <option value="">{{ placeholder }}</option>
      <option :value="schoolType.id" v-for="(schoolType, index) in schoolTypes" :key="index">{{ schoolType.id }}</option>
  </select>

父母可以“发送”一个值给孩子（我称之为“价值”的道具）。并且孩子必须将“选择”选项添加到正确的项目中。

我尝试了很多事情都没有成功。这是我的第一个组件。

Answer 1

value="this.school_type_id"

this没有在模板区定义：

<select-school-type class="form-control" required value="school_type_id" @selected="changeSchoolTypeId"></select-school-type>

1. 如果你在不使用: 的情况下传递道具，则 (value="school_type_id") school_type_id 将是字符串类型。但是这里我们喜欢传递变量school_type_id → :value="school_type_id"

2. v-model 在 child 中改变了 prop value，这是 vue 不允许的。您应该会在控制台中看到一条警告：“避免直接更改道具......”。以这种方式更改它，也许它可以按预期工作：

<select @change="$emit('selected', $event.target.value)" :selected="value">
      <option value="">{{ placeholder }}</option>
      <option :value="schoolType.id" v-for="(schoolType, index) in schoolTypes" :key="index">{{ schoolType.id }}</option>
  </select>

如果您想改用v-model，您可以将计算的getter/setter 绑定到它的值：https://vuejs.org/v2/guide/computed.html#Computed-Setter 在 setter 中，您发出新值：

computed: {
  selectedValue: {
    get() {
      return this.value;
    },
    set(newValue) {
      this.$emit('selected', newValue);
    },
  },
},

<select v-model="selectedValue">
      <option value="">{{ placeholder }}</option>
      <option :value="schoolType.id" v-for="(schoolType, index) in schoolTypes" :key="index">{{ schoolType.id }}</option>
  </select>