在 vue js 的 winds 中传递参数的问题

Question

我有这段代码，我在信息变量中得到了一个数组。问题出在调用删除函数的删除按钮中，该函数将 id 作为参数传递，但它将第一个 id 传递给所有元素，因此当我删除任何元素时，它会删除第一个元素而不是引用按钮

    <tr>
      <th scope="row">{{info.product_key}}</th>
      <td>{{info.name}}</td>
      <td>{{info.quantities}}</td>
      <td>{{info.quatities_sold}}</td>
      <td>{{info.cost_price}}</td>
      <td>{{info.sale_price}}</td>
      <td><button @click="showEditModal" class="btn btn-warning">editar</button></td>
       <EditProductModal 
       :_id=info._id 
       :product_key=info.product_key
       :product_name=info.name 
       :quantities=info.quantities
       :quantities_sold=info.quatities_sold
       :cost_price=info.cost_price
       :sale_price=info.sale_price
       :categories=info.categories
         />
      <td><button @click="remove(info._id)" class="btn btn-danger">excluir</button></td>
    </tr>
   
  </tbody>```

Answer 1

正如您所说 I get an array in the info variable 但看起来您没有迭代而是直接使用它。如果您使用 v-for 正确迭代它，它应该传递正确的 ID。

工作演示：

const app = new Vue({
  el: '#app',
  data: {
    info: [{
      '_id': 1, 
      'name': 'alpha'
    }, {
      '_id': 2, 
      'name': 'beta'
    }, {
      '_id': 3, 
      'name': 'gama'
    }]
  },
  methods: {
    remove(itemID) {
        console.log(itemID);
    }
  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="item in info" :key="item._id">
      <td>{{item.name}}</td>
      <td><button @click="remove(item._id)">excluir</button></td>
    </tr>
  </table>
</div>

在 vue js 的 winds 中传递参数的问题

problems passing parameters in winds in vue js

javascript

events

node.js

vue.js

two-way-binding