forms - 如何在Vuejs2中清除material-ui md-field组件？

Question

我在 Vue2 中有一个简单的列表组件，可以添加/删除项目。我的问题是，当我从常规 HTML 元素切换到 material-ui ( https://vuematerial.io/ ) 时，我的输入清除功能坏了。

这是它的样子：

对于常规的 HTML 元素，我只是通过 ID（从我的组件脚本的方法中）定位元素并为其分配一个空字符串以清除它，如下所示：

      if (input.value !== '') {
        this.items.push({
          text: input.value
        })
        input.value = ''
      }

我找到了解决方案，我将在下面回答，但我的问题是：如何在使用 material-ui 元素时清除该字段？还有一个我自己还没有完全回答的问题：它为什么会坏掉？

score 0 · Accepted Answer

所以，首先是让它工作的“如何”：

我需要在我的元素上设置一个“v-model”属性（我称之为“inputField”），然后在组件的数据属性中将其初始化为空，然后在我的组件方法“addInput”函数中，我必须设置“this.inputField = ''”而不是“input.value = ''”。

为了显示：

所以，这行得通。结果如下：

现在，剩下的问题是这一切究竟是如何工作的，以及为什么适用于常规 HTML 的方法失败了？我不确定，我欢迎任何可以解释的人的解释/教育！

Vue DevTools for Chrome似乎给出了提示：

“Mdclearable”在直觉上似乎是相关的；此属性设置为 false。这和它有关系吗？我不确定。

更多地了解Vue 的“v-model”和反应性也有助于解决这个问题。

同样，欢迎补充评论以帮助阐明这里发生的事情！我希望这个问答能帮助其他人在未来避免一些挫折。

1 回答 1