Vue.js + Materialize.js проблема с выбранной реактивностью ввода - PullRequest
Новая
       12

Vue.js + Materialize.js проблема с выбранной реактивностью ввода

0 голосов
/ 28 октября 2018

У меня есть этот код с двумя формами. Первая форма имеет поле ввода текста для добавления имен групп. 

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

Вторая форма имеет поле выбора, которое должно обновляться значениями в группах Массив: 

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

Это работает без Materialize, но когда я добавляю Materialize, чтобы стилизовать поле выбора: 

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

Материализация - это не только стилизация выбранного входа, но и превращение его в

...