Question

我有两种形式的代码。第一种形式具有用于添加组名的文本输入字段。

<form v-on:submit.prevent='addGroup'>
    <div class='input-field'>
        <label>Name</label>
        <input type='text' v-model='group_name'>
    </div>

如代码所示，在表单上提交函数 addGroup ：

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            group_name: '',
            groups: []
        },
        methods: {
            addGroup() {
                this.groups.push(this.group_name);
                this.group_name= '';
            }
        }
    });
</script>

函数 addGroup 仅将名称从文本输入中推送到组Array。

第二种形式具有一个选择字段，该字段应通过Array组中的值进行更新：

<select>
    <option v-for='group in groups'>{{ group }}</option>
</select>

这在没有Materialize的情况下有效，但是当我添加Materialize来设置选择字段的样式时

document.addEventListener('DOMContentLoaded', () => {
    M.FormSelect.init(document.querySelectorAll('select'));
});

Materialize不仅为选择输入设置样式，还将其转换为

有人知道解决这个问题的方法吗？

选择输入反应性的Vue.js + Materialize.js问题

0 个答案: