如何清除 Vuejs2 中的 material-ui md-field 组件？答案

【问题标题】：How to clear a material-ui md-field component in Vuejs2?如何清除 Vuejs2 中的 material-ui md-field 组件？
【发布时间】：2018-11-12 11:53:09
【问题描述】：

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

这就是它的样子：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

为了说明：

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

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

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

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

进一步了解Vue's "v-model" 和reactivity 也有助于解决这个问题。

再次，欢迎更多的 cmets 帮助阐明这里发生的事情！我希望这个 Q&A 可以帮助其他人在未来避免一些挫败感。

【讨论】：