Vue v-text-field - previous value is automatically displayed when clicked

0
votes

The Vue input fields (v-text-field) automatically show the previous input when I click on the text field. Actually, I delete the value from all inputs with the blue button (which also creates additional random tables). The reset works, but why is the value displayed again?

What I tried: I used v-form to delete the value of all inputs with this.$refs.form.reset(); (see https://vuetifyjs.com/en/components/forms/#misc). That didn't solve the problem.

This is how it looks: 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>

Method 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";
      }
...
}

Solution

(with the help of Michael Levý's answer)

  • v-model
<td> 
 <v-text-field v-model="verb.val[0]"></v-text-field>
</td>
...
  • reset value
for (var i = 0; i < this.verben.length; i++) {
  this.verben[i].val[0] = "";
  ...
}
  • in each array
verben: [
  {
    val: ["", "", "", "", "", ""],
    ...
  }
1
javascripthtmlvue.jsvuetify.js

1 Answers

0
votes

v-text-field has some internal variable which saves the value when you are typing. Your next() method doesn't clear this value but only sets value of the rendered <input> control - when you click on the control, v-text-field is re-rendered and shows the value stored inside

Your next method is an example how not to work with form items in Vue. Vue is data driven. For each control you need a variable in data() section of your component and use v-model to bind the control to that variable.

Now when you want to change the value programmatically, you change the data in your component (not in the DOM)

Form Input Bindings

Vuetify form controls works same way - examples