在 Vue.js 和 Materializecss 中使用多个“选择”HTML 元素答案

【问题标题】：Using multiple 'select' HTML element with Vue.js and Materializecss在 Vue.js 和 Materializecss 中使用多个“选择”HTML 元素
【发布时间】：2018-07-18 21:25:05
【问题描述】：

我正在尝试使用 Vue.js 制作一个 HTML 多选表单元素。关注this 后效果很好。但是，如果我要添加 Materialize css，select 元素看起来会更好，但它不起作用，我会收到以下警告：

[Vue 警告]: : 使用 v-model 时，将忽略 inline selected 属性。改为在组件的数据选项中声明初始值。

[Vue 警告]：它的绑定需要一个 Array 值，但得到了 Number （在根实例中找到）

这是我的 Vue.js 代码：

        var app = new Vue({
          el: '#app',
          data: {
            selected: 900,
            options: [{
              value: 12,
              text: 12
            }, {
              value: 24,
              text: 24
            }, {
              value: 36,
              text: 36
            }]
          },

这是选择元素：

<select v-model="selected" multiple>
    <option selected value="900">Please Select</option>
    <option v-for="option in options" :value="option.value">
    {{ option.text }}
    </option>
</select>
<label>Select appropraite data type(s)</label>

【问题讨论】：

标签： html drop-down-menu vue.js vuejs2 materialize

【解决方案1】：

结合常规 Vue 和常规 Materialize 不是一个好主意。由于有几个相互冲突的因素不容易解决，但以下是 2 个有用的库。已弃用的库很少，但旧版本可以正常工作。

Vue-Materialize 或 Ceri-Materialize 将很好地满足您的目的。

【讨论】：