Vue 3 - 创建动态输入答案

【问题标题】：Vue 3 - Create dynamic inputVue 3 - 创建动态输入
【发布时间】：2022-11-22 23:43:15
【问题描述】：

在表单中，我有一个字段来添加图像的 url，但它们可以有多个，并且我正在动态创建每个输入，但是我在一个输入中输入的内容在另一个中发生了变化，错误在哪里？

注意：我找到了一些提示，但它们也没有用。

<script setup>
const items = ref([])
let ids = items.value.length + 1

const addRow = () => {
  const i = Math.round(Math.random() * items.value.length)
  items.value.splice(i, 0, ids++)
}
<script>
<template>
<div>
        <InputLabel for="url" value="URL da imagem" />
        <div>
          <TextInput id="url" v-model="form.url" type="url" required />
            <button type="button" @click="addRow">
              +
            </button>
        </div>
      </div>

      <div  v-for="(item, index) in items" :key="item">
        <InputLabel for="url" value="URL da imagem" />
        <div>
          <TextInput :id="index + 1" v-model="form.url" type="url" required />
          <div class="flex justify-start">
              <button type="button" @click="addRow">
                +
              </button>
              <button type="button" @click="removeField">
                -
              </button>
          </div>
        </div>
      </div>
</div>
</template>

【问题讨论】：

标签： php laravel vuejs3

【解决方案1】：

你可以这样做：

只需将标签更改为您的组件和输入

<script setup>
  import { ref } from 'vue'
  const items = ref([
    {
      id:1, url: ''
    }
  ])
  const addRow = () => {
    items.value.push({
      id: items.value.length + 1,
      url: '',
    })
  }
</script>

<template>
  <div>
    <div  v-for="(item) in items" :key="item">
      <label for="url" value="URL da imagem" />
      <div>
        <input :id="item.id" v-model="item.url" type="url" required />
        <div class="flex justify-start">
            <button type="button" @click="addRow">
              +
            </button>
            <button v-if="item.id !=1" type="button" @click="removeField">
              -
            </button>
        </div>
      </div>
    </div>
  </div>
</template>

【讨论】：