Vue JS Custom Select - привязка к

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-модель, чтобы связать значение непосредственно с v-моделью, вам необходимо $ emit внутри дочернего компонента.

Вы можете изменить selectValue функцию

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