时间戳

首页 > 解决方案 > 对象属性更改时如何在vue js中获取对象索引？

javascript - 对象属性更改时如何在vue js中获取对象索引？

问题描述

我的 vue 组件代码如下所示。

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

现在我想在 v-model="product_id" 更改时获取对象索引。有什么办法可以得到吗？

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

谢谢

标签： javascriptvue.js

解决方案

为什么不添加一些触发@change事件的方法？

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.com/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>

推荐阅读