V-model 和 materializecss M.FormSelect 问题

Question

我有一个具有多个选项的 materializecss select 元素。我想向服务器发送 selected 选项，但我想显示一些默认选项，所以当我 select 一些其他选项并提交时，我使用变量设置为默认选项值的 v-model一切正常。提交表单后，我将变量设置为我想默认显示的选项的值，但它不会更新。

模板

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

脚本

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 的值被设置回 'State' 但选项仍然是最后选择的。请聪明的人帮助我。我真的很喜欢 VueJS 但在这样的情况下它气死我了。我知道问题出在 materializecss 的某个地方。可悲的是，没有方法可以手动设置 M.FormSelect 的值。

Answer 1

我发现了 jQuery 的 hack，但我不想在我的代码中仅将 jQuery 用于一项任务。所以我简单地为 select 组件使用 browser-default class 并在组件的样式部分复制了所有 materializecss select 标签样式。它看起来仍然很棒，但现在可以使用了！

V-model 和 materializecss M.FormSelect 问题

V-model and materializecss M.FormSelect issue

vue.js

materialize

v-model