Vue.js <select> v-model not binding within component

Question

I am trying Vue.js, everything looks great other than working with select inputs within components. I created a basic fiddle setup to illustrate the problem : https://jsfiddle.net/8f24xLdq/

    <div class="panel-body" id="vue">
  <example></example>
</div>
<script type="text/x-template" id="t">
  <div>
    <select v-bind="selected">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script>
  Vue.component('example', {
    template: "#t",
    data: function() {
      return {
        selected: 'A',
        options: [{
          text: 'One',
          value: 'A'
        }, {
          text: 'Two',
          value: 'B'
        }, {
          text: 'Three',
          value: 'C'
        }]
      }
    }
  });

  new Vue({
    el: "#vue"
  });

</script>

its4zahoor · Accepted Answer · 2018-09-26 12:07:16Z

2

Use v-model instead of v-bind in <select >

<select v-model="selected">

edited Sep 26, 2018 at 12:07

its4zahoor

1,8211 gold badge17 silver badges23 bronze badges

answered Feb 24, 2017 at 22:32

Tushar Arora

1,1462 gold badges10 silver badges22 bronze badges

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

Comments

anlijudavid · Accepted Answer · 2017-03-08 03:22:08Z

0

  <div class="col-md-6">
    <select v-model="selectedto">
      <option v-for="option in estados" v-bind:value="option.id" :key="option.id" v-html="option.label">
      </option>
    </select>
    <span v-html="selectedto"></span>
  </div>

  mounted: function () {
     console.log('created', this);
     var vm = this;
     vm.$root.selectedto = 1;
  }

answered Mar 8, 2017 at 3:22

anlijudavid

5396 silver badges13 bronze badges

Collectives™ on Stack Overflow

Vue.js <select> v-model not binding within component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related