Как сделать множественное поле редактирования на Vue?

Question

[Александр Филиппенко]

Всем добрый день.
Делаю множественное поле.

<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({});
      }

Всё работает, но при вводе каждого символа с поля слетает фокус, как избавиться от этого эффекта?

Answer 1

[0xD34F]

при вводе каждого символа с поля слетает фокус

Потому что при изменении значения поле создаётся заново - ведь вы в качестве key это значение и указали. Что само по себе является дичью несусветной, кроме того, так у вас могут быть поля с одинаковыми key.

Генерируйте уникальные значения для key в момент добавления нового элемента в массив company_ids. Если удаление элементов из массива не предполагается, это может быть просто количество элементов / индекс элемента в массиве:

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

В противном случае можно сделать в компоненте свойство, значение которого будет при каждом добавлении увеличиваться:

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

Или можно брать текущее максимальное значение key + 1:

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

Comments

[Александр Филиппенко]

Спасибо. Сделал в итоге так. Не уверен что это оптимальное решение, но работает нормально.

<div v-for="company in form.company_ids" :key="company.key">
              <v-text-field
                v-model="company.id"
              ></v-text-field>
            </div>

data: () => ({
      form: new Form({
        email: '',
        password: '',
        role: '',
        company_ids: [{key: 1}]
      })
    }),

addCompany() {
        this.form.company_ids.push({key: this.form.company_ids.length + 1});
      }