Vue js custom select - binding to the

Question

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

ittus · Accepted Answer · 2018-06-02 01:33:50Z

1

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

answered Jun 2, 2018 at 1:33

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js custom select - binding to the

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related