Vue js自定义选择 - 绑定到

Question

我有一个自定义选择框。

<select-box :options="['Male', 'Female', ]"
            title="Gender"
            v-bind:value="selected"
            v-model="person.gender"
>
</select-box> 

.vue代码

<script>
    export default {
          props:['title', 'options'],
          data () {
            return {
              selected: this.title,
              dropdownVisible: false,
            }
          },
          methods: {
            toggleOptions() {
              this.dropdownVisible = !this.dropdownVisible
            },
            selectValue(option) {
              this.selected = option;
              this.toggleOptions();
            }
        }

        }

如何将所选值直接绑定到模型（person.gender）？

Answer 1

我假设上面的.vue代码属于select-box组件。

因为我看到你使用v-model，要将值直接绑定到v-model，你需要$ children inside子组件。

您可以更改selectValue功能

selectValue(option) {
  this.selected = option;
  this.$emit('input', option);
  this.toggleOptions();
}