My vue ponent code looks like this.

data: function () {
    return {   
        products: [ 
            { product_id: '', price: ''}, 
            { product_id: '', price: ''},  
        ],
    }
},

Now I want to get object index when v-model="product_id" changed. Is there any solution to get it?

<div v-for="(product, key) in products">
    <input type="text" v-model="product.product_id" />
    <input type="text" v-model="product.price" />
</div><!--  /.div -->

Thanks

My vue ponent code looks like this.

data: function () {
    return {   
        products: [ 
            { product_id: '', price: ''}, 
            { product_id: '', price: ''},  
        ],
    }
},

Now I want to get object index when v-model="product_id" changed. Is there any solution to get it?

<div v-for="(product, key) in products">
    <input type="text" v-model="product.product_id" />
    <input type="text" v-model="product.price" />
</div><!--  /.div -->

Thanks

• javascript
• vue.js

Share Improve this question Follow edited Feb 25, 2019 at 11:58 Rakibul Hasan asked Feb 25, 2019 at 11:32 Rakibul HasanRakibul Hasan 49055 silver badges1414 bronze badges 4

• What do you mean by array object index? – Harsh Patel Commented Feb 25, 2019 at 11:35
• You can use watch, with deep: true, and you don't need the index, you have the actual object reference. But if you want the index just use Array.findIndex() or lodash's equivalent. – Zach Leighton Commented Feb 25, 2019 at 11:39
• @HarshPatel If the first product_id changed it want to get 0 index. if the second product_id changed than 1 – Rakibul Hasan Commented Feb 25, 2019 at 11:43
• @ZachLeighton Can you give me demo code? – Rakibul Hasan Commented Feb 25, 2019 at 11:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Why not just add some method that triggers on @change event?

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Play around in JSFiddle' },
      { text: 'Build something awesome' }
    ]
  },
  methods: {
    getIndex(index) {
    	console.log(index)
    }
  }
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(todo, index) in todos" @key="index">
    <input type="text" v-model="todo.text" @change="getIndex(index)">
  </div>
</div>

Read this: findIndex

data() {
    return {
    products: {  
            product: [ 
                { product_id: '1', price: '50'}, 
                { product_id: '2', price: '93'},  
            ],
            another_field: '',
    },
  }
},
watch: {
    'products.product.product_id'(newId) {
    this.products.another_field = this.products.product.findIndex(p => p.product_id == newId)
  }
}

You can use a watch with something like this:

watch: {
   'products.product': {
       handler(newValue, oldValue) {
           // make sure it changed
           if(newValue != oldValue) {
              // get the row that changed
              let [rowChanged] = _.difference(newValue, oldValue);
              // find its index
              let arrayIndex = newValue.indexOf(rowChanged);
           }  
       },
       deep: true
   }
}

Something like this should work. If you want you can bine everything into a jsfiddle so we can see the whole .vue ponent.