Vue v-text-field - 点击时自动显示上一个值

Question

当我点击文本字段时，Vue 输入字段（v-text-field）会自动显示上一个输入。 实际上，我使用蓝色按钮从所有输入中删除了值（这也创建了额外的随机表）。重置有效，但是为什么又显示值了？

我尝试了什么：我使用 v-form 来删除所有输入的值 this.$refs.form.reset(); （见https://vuetifyjs.com/en/components/forms/#misc）。这并没有解决问题。

这是它的外观： GIF

HTML

          <v-simple-table>
            <template v-slot:default>
              ...
              <tbody>
                <tr :class="verb.ich">
                  <td>
                    <v-text-field label="ich"></v-text-field>
                  </td>
                </tr>
                <tr :class="verb.du">
                  <td>
                    <v-text-field label="du"></v-text-field>
                  </td>
                </tr>
                <tr :class="verb.er">
                  <td>
                    <v-text-field label="er/sie/es"></v-text-field>
                  </td>
                </tr>
                ...
                ...
              </tbody>
            </template>
          </v-simple-table>
          ...
          <v-btn @click="next"> Weiter </v-btn>

方法next()：

next: function () {
      var allInputs = document.getElementsByTagName("input");
      for (var i = 0, max = allInputs.length; i < max; i++) {
        allInputs[i].value = "";
        allInputs[i].style.backgroundColor = "white";
      }
...
}

解决方案

（借助 Michael Levý 的回答）

• v-模型

<td> 
 <v-text-field v-model="verb.val[0]"></v-text-field>
</td>
...

• 重置值

for (var i = 0; i < this.verben.length; i++) {
  this.verben[i].val[0] = "";
  ...
}

• 在每个数组中

verben: [
  {
    val: ["", "", "", "", "", ""],
    ...
  }

Answer 1

v-text-field 有一些内部变量，可以在您键入时保存值。您的 next() 方法不会清除此值，而只会设置呈现的 <input> 控件的值 - 当您单击控件时，v-text-field 会重新呈现并显示其中存储的值

您的next 方法是如何在 Vue 中不使用表单项的示例。 Vue 是数据驱动的。对于每个控件，您需要在组件的 data() 部分中添加一个变量，并使用 v-model 将控件绑定到该变量。

现在，当您想以编程方式更改值时，您可以更改组件中的数据（而不是 DOM 中）

Form Input Bindings

Vuetify 表单控件的工作方式相同 - examples