vue.js v-bind:value is not working with select option form element

Question

I have a strange problem, watching at the tutorials of vue.js here: https://v2.vuejs.org/v2/guide/forms.htmlthe the following code should work:

<div class="input-field">
    <select v-model="selected">
         <option v-for="couponType in couponTypes" v-bind:value="couponType" value="">{{ couponType }}</option>
         </select>
         <label>Tipo de cupon</label>
</div>

this template works with the following script:

<script>
export default {
    data: function () {
        return {
          couponTypes: [ "V333333333333é",
           "Vasdasdasd",
           "V211111111Café",
           "444444444444444444"
          ],
          selected: "",
          newCoupon: {
            couponTypeSelected: "",
            userId: ""
          }
        }
    },
    methods: {
      SendCoupon: function () {
        console.log(this.newCoupon)
        console.log(this.selected)
      }
    },
    created: function () {
      $(document).ready(function() {
        $('select').material_select();
        $('.modal').modal();
      });
    }
}

When sendCoupon() is triggered it supposedly selected variable should print the value of the selected option in the select element, but it only prints an empty string that is the initial setted value.

David L · Accepted Answer · 2017-05-11 02:00:55Z

2

I cannot reproduce your issue. Adding a button with a click event that calls your SendCoupon() method clearly demonstrates that each selected item is correctly output. See this working JSFiddle.

Template:

<div id="app">
  <div class="input-field">
    <select v-model="selected">
       <option v-for="couponType in couponTypes" v-bind:value="couponType" value="">
           {{ couponType }}
      </option>
    </select>
    <label>Tipo de cupon</label>
    <button @click="SendCoupon">Send</button>
  </div>
</div>

JavaScript:

new Vue({
    el: '#app',
    data: function () {
        return {
          couponTypes: [ "V333333333333é",
           "Vasdasdasd",
           "V211111111Café",
           "444444444444444444"
          ],
          selected: "",
          newCoupon: {
            couponTypeSelected: "",
            userId: ""
          }
        }
    },
    methods: {
      SendCoupon: function () {
        console.log(this.newCoupon)
        console.log(this.selected)
      }
    },
    created: function () {
    }
})

Note that it is the selected property that is updated, not the newCoupon property since your select v-model is bound to the selected property.

answered May 11, 2017 at 2:00

David L

34.1k8 gold badges70 silver badges98 bronze badges

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

1 Comment

Anargu Over a year ago

That's why I say it's rare, it should work as it worked in your code in jsfiddle. I did it all the steps as the vue.js documentation but it doesn't work in my .vue components

Anargu · Accepted Answer · 2017-05-14 06:08:38Z

After days searching about a solution I found that the cause of this error is the use of materializecss with vue.js on the templates. According to this reported issue ( github reported isssue ), materialize css modify the DOM when there is a select or ul (list) on the template of a .vue component. In the reported issue on Github there is a workaround: add browser-default as a class to the select element,this disables to materialize to modify the DOM element, then binding of vue could work. Here I drop an example.

              <div class="input-field">
                <select class="browser-default" id="selectoption" v-model="newCoupon.coupon">
                  <option v-for="selected in couponTypes" v-bind:value="selected">{{ selected }}</option>
                  <label for="selectoption">Cupon</label>
                </select>
              </div>

Collectives™ on Stack Overflow

vue.js v-bind:value is not working with select option form element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related