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

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仅将名称从文本输入推送到组数组。

第二种形式有一个选择字段，应该由组数组中的值更新：

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

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

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

Materialize 不仅对选择输入进行样式化，还将其转换为 <ul>。这可以防止添加到组的值出现在选择选项中。

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

标签： selectvue.jsmaterialize