Vue 3 - Create dynamic input

Question

In the form I have a field to add the url of an image, but they can have several and I'm dynamically creating each input, but what I type in one changes in the other, where is the error?

Note: I found some tips but they didn't work either.

<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>

Martinez · Accepted Answer · 2022-11-22 15:43:15Z

2

You can do this:

just change the label to your component and the input

<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>

answered Nov 22, 2022 at 15:43

Martinez

1,1301 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LΞИIИ Over a year ago

This is reactive

Collectives™ on Stack Overflow

Vue 3 - Create dynamic input

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related