V-модель и материализация c выпуском M.FormSelect - PullRequest
Новая
       15

V-модель и материализация c выпуском M.FormSelect

1 голос
/ 21 сентября 2019

У меня есть элемент выбора materializecss с несколькими вариантами.Я хочу отправить выбранную опцию на сервер, но хочу показать некоторую опцию по умолчанию, поэтому я использую v-модель с переменной, установленной в значение опции по умолчанию, когда я выбираю какую-то другую опцию и отправляю форму, все в порядке.После отправки формы я устанавливаю переменную в значение опции, которую я хочу показать по умолчанию, но она не обновляется.

Шаблон 

<select ref="select" v-model="state">
  <option value="State" disabled selected
  >Choose a state</option
  >
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

script 

data: () => ({
  select: null,
  state: 'State'
)},
mounted() {
  this.select = M.FormSelect.init(this.$refs.select, {});
  M.updateTextFields();
},
methods: {
  async submitHandler() {
    try {

      // here I upload data on server (lots of code) 
      // and after it's uploaded I clear all fields

      this.state = 'State' // I set it back to default option value
    }
    catch (e) {}
 }
}

Но он не обновляется (((Я новичок в vuejs, но я стараюсь изо всех сил понять, что происходит и почему это не такНе устанавливайте опцию по умолчанию даже после изменения модели. Я вижу в инструментах разработчика в расширении vue, что значение this.state установлено в значение «Состояние», но параметры все еще выбраны последними. Помогите, пожалуйста, мудрые людиЯ действительно люблю VueJS, но в таких ситуациях это бесит. Я знаю, что проблема где-то в materializecss. Грустная вещь в том, что нет способа установить значение M.FormSelect вручную.

1 Ответ

0 голосов
/ 22 сентября 2019

Я нашел хак с jQuery, но я не хотел использовать jQuery в своем коде только для одной задачи.Поэтому я просто использовал класс браузера по умолчанию для выбора компонента и скопировал все стили тегов выбораizeizecile в разделе стилей компонента.И это все еще выглядит потрясающе, но теперь это работает!

...