CODEWITHSUNDEEP
data-bindingvuejs2components
LeBlaireau
LeBlaireau

Reputation: 17467

Vue js custom select - binding to the

I have a custom select box.

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

The .vue code

<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();
            }
        }

        }

How can I bind the selected value directly to the model (person.gender)?

Upvotes: 0

Views: 573

Answers (1)

ittus
ittus

Reputation: 22403

I assume that above .vue code belongs to select-box component.

Because I saw you use v-model, to bind value directly to v-model, you need to $emit inside children component.

You can change your selectValue function 

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

Upvotes: 1

Related Questions