Vue.js 如何使用选定值初始化select？

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

家长：

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

{{占位符}}
{{schoolType.id}

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

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

value=“this.school\u type\u id”

此

未在模板区域中定义：

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

如果您想改用

v-model

，可以将计算的getter/setter绑定到它的值： 在setter中，发出新值：

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

{{占位符}}
{{schoolType.id}

谢谢JohMun的回答。我喜欢你的“计算”解决方案。我试过了，但不幸的是没有成功。我想我的问题是：value=“school\u type\u id”。我继续读文件…解决了！家长发送了字符串“school\u type\u id”。我必须使用：value=“school\u type\u id”。现在对于计算列，它工作得很好。谢谢约翰。

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>