Vue.js — это популярная платформа JavaScript, предоставляющая мощные инструменты для создания реактивных и динамических веб-приложений. Одной из его ключевых особенностей является директива v-model, которая обеспечивает двустороннюю привязку данных между элементами ввода формы и данными компонента Vue. В этой статье мы рассмотрим различные методы использования v-модели в Vue.js при работе с циклами for. Мы рассмотрим примеры кода, чтобы продемонстрировать каждый подход, что позволит вам реализовать наиболее подходящий метод для вашего конкретного случая использования.

Метод 1: подход на основе индекса
В этом методе мы можем использовать индекс цикла для привязки каждого элемента к уникальной v-модели. Этот подход полезен, когда вам нужно получить доступ к отдельным элементам цикла или обновить их.

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input v-model="items[index]">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ['item 1', 'item 2', 'item 3']
    };
  }
};
</script>

Метод 2: объектно-ориентированный подход
Если элементы вашего цикла представляют собой объекты с уникальными идентификаторами, вы можете использовать свойство объекта в качестве привязки v-модели. Этот метод полезен, если вы хотите обновить определенные свойства объектов в цикле.

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input v-model="item.name">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ]
    };
  }
};
</script>

Метод 3: подход с использованием вычисляемых свойств
В некоторых случаях может потребоваться выполнить дополнительные вычисления или манипуляции со значениями перед их привязкой к входным элементам. Этого можно добиться, используя вычисляемое свойство.

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input v-model="computedItems[index]">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: ['item 1', 'item 2', 'item 3']
    };
  },
  computed: {
    computedItems: {
      get() {
        return this.items.map(item => item.toUpperCase());
      },
      set(value) {
        this.items = value.map(item => item.toLowerCase());
      }
    }
  }
};
</script>

Метод 4: использование компонентного подхода
Если у вас в цикле более сложная структура формы, возможно, будет полезно извлечь ее в отдельный компонент Vue. Такой подход способствует повторному использованию и поддерживает чистоту кода.

Родительский компонент:

<template>
  <div>
    <custom-input v-for="item in items" :key="item.id" v-model="item.name"></custom-input>
  </div>
</template>
<script>
import CustomInput from './CustomInput.vue';
export default {
  components: {
    CustomInput
  },
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ]
    };
  }
};
</script>

Компонент CustomInput:

<template>
  <div>
    <input v-model="value">
  </div>
</template>
<script>
export default {
  props: ['value']
};
</script>

Использование директивы v-model в циклах for Vue.js обеспечивает удобный способ управления привязкой данных между элементами формы и данными компонентов. В этой статье мы рассмотрели несколько методов использования v-модели в циклах for, включая подход на основе индексов, подход на основе объектов, подход с использованием вычисляемых свойств и использование компонентного подхода. Понимая эти методы и соответствующие примеры кода, вы сможете использовать весь потенциал v-модели в своих приложениях Vue.js.