How to make multiple edit box in Vue?

Question

Vue.js

Good afternoon everyone.
I am making a multiple field.

<v-layout row wrap justify-center>
          <v-flex xs7>
            <div v-for="company in form.company_ids" :key="company.id">
              <v-text-field
                v-model="company.id"
              ></v-text-field>
            </div>
          </v-flex>
          <v-flex text-xs-center xs7>
            <v-btn color="success" @click="addCompany">
              Добавить компанию
            </v-btn>
          </v-flex>
        </v-layout>

addCompany() {
        this.form.company_ids.push({});
      }

Everything works, but when you enter each character from the field, the focus flies, how to get rid of this effect?

Answer 1

when you enter each character from the field, the focus flies

Because when the value changes, the field is recreated - after all, you specified this value as a key. Which in itself is utter game, in addition, so you can have fields with the same key.
Generate unique values ​​for key at the time a new element is added to the company_ids array. If the removal of elements from the array is not intended, it can simply be the number of elements / index of the element in the array:

this.form.company_ids.push({
  key: this.form.company_ids.length,
});

Otherwise, you can make a property in the component, the value of which will increase with each addition:

this.form.company_ids.push({
  key: ++this.currKey,
});

Or you can take the current maximum value of key + 1:

this.form.company_ids.push({
  key: Math.max(0, ...this.form.company_ids.map(n => n.key)) + 1,
});