vue.js v-bind:value 不适用于选择选项表单元素答案

【问题标题】：vue.js v-bind:value is not working with select option form elementvue.js v-bind:value 不适用于选择选项表单元素
【发布时间】：2017-10-09 19:47:04
【问题描述】：

我有一个奇怪的问题，看这里的vue.js教程：https://vuejs.org/v2/guide/forms.htmlthe下面的代码应该可以工作：

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

此模板适用于以下脚本：

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

当 sendCoupon() 被触发时，它应该被选中的变量应该在 select 元素中打印所选选项的值，但它只打印一个空字符串，即初始设置值。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

我无法重现您的问题。添加一个带有单击事件的按钮，该按钮调用您的SendCoupon() 方法，清楚地表明每个选定的项目都已正确输出。看到这个工作JSFiddle。

模板：

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

请注意，更新的是selected 属性，而不是newCoupon 属性，因为您选择的v-model 绑定到selected 属性。

【讨论】：

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

【解决方案2】：

在寻找解决方案几天后，我发现这个错误的原因是在模板上使用了带有 vue.js 的 materializecss。根据这个报告的问题 (github reported isssue)，当 .vue 组件的模板上有 select 或 ul (list) 时，materialize css 修改 DOM。在 Github 上报告的问题中，有一个解决方法：将 browser-default 作为类添加到 select 元素中，这将禁用物化以修改 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>

【讨论】：