how can i use v-for loop in my vuejs project-CodePudding

I have a loop and I have 4 inputs in this loop. I want to give the id values from each loop separately to my 4 inputs, how do I do that? enter image description here enter image description here

i am running a loop there is only one input this input is values from a loop how do i provide value retention for each individual using a v-model

CodePudding user response：

This is basic Vuejs. You need to return data as follows:

<script>
export default {
  data() {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }
}
</script>

Then you create a v-for loop:

<template>
  <div v-for="(item, index) in items">
        <input :id="index" v-model="item.message" />
  </div>
</template>

So in your case it might looks something like:

<script>
  export default {
    props: {
      altinFiyati: Object
    },
    data() {
      return {
        altinCount: this.altinFiyati,
      }
    }
  }
</script>

Then in your v-for loop you would connect whatever data to your v-model input:

<template>
  <div v-for="(item, index) in altinCount">
        <input :id="index" v-model="item.message" />
  </div>
</template>

CodePudding user response：

What went wrong? Is your component properly configured to use v-model? Additionally, since you are presently iterating over that item, you do not need to pass in listOfItems[index]. Instead, you may just refer to the item with the v-model="item" prefix.