Javascript vue.js v-bind:值不适用于选择选项表单元素

我有一个奇怪的问题，在这里观看vue.js的教程：以下代码应该可以工作：

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

{{couponType}}
提波德库蓬

此模板可与以下脚本一起使用：

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

导出默认值{
数据：函数（）{
返回{
耦合类型：[“V333é”，
“Vasdasdasd”，
“V2111111Café”，
"444444444444444444"
],
选定：“，
新优惠券：{
couponTypeSelected:“”，
用户ID:“
}
}
},
方法：{
send优惠券：函数（）{
console.log（this.new优惠券）
console.log（此.selected）
}
},
已创建：函数（）{
$（文档）.ready（函数（）{
$（'select'）。材料选择（）；
$（'.modal'）.modal（）；
});
}
}

---

当触发SendCouncil（）时，假定选定的变量应该打印select元素中选定选项的值，但它只打印一个空字符串，即初始设置的值

我无法复制您的问题。添加一个带有调用

sendCouncil（）

方法的click事件的按钮，可以清楚地表明每个选定项都是正确输出的。看到这个了吗

模板：

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

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

---

请注意，更新的是

selected

属性，而不是

newCoupon

属性，因为select

v-model

绑定到

selected

属性。

在搜索解决方案几天后，我发现此错误的原因是在模板上使用了materializecss with vue.js。根据这个报告的问题（），当.vue组件的模板上有select或ul（列表）时，具体化css修改DOM。在Github上报告的问题中，有一个解决方法：将

浏览器默认值

作为类添加到select元素中，这将禁用materialize来修改DOM元素，然后vue的绑定就可以工作了。这里我举一个例子

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

{{selected}}
库彭

这就是为什么我说它很少见，它应该像在JSFIDLE中的代码中一样工作。我在vue.js文档中完成了所有步骤，但在我的.vue组件中不起作用