javascriptarraysvue.jsv-forv-model

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


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


Solution

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