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

Posted 2023-02-22

【中文标题】在 Vue.js 和 Materializecss 中使用多个“选择”HTML 元素

【英文标题】：Using multiple 'select' HTML element with Vue.js and Materializecss

【发布时间】：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>

【参考方案1】：

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

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