Javascript 为什么我的Vue方法中的变量没有根据我在多个元素上设置的v-click指令进行更新？

v-on:click=“removeProduct”没有更新我在methods对象的removeProduct函数中设置的变量。具体来说，在jQuery的帮助下，每个表行上设置的唯一产品密钥应该存储在一个变量中，然后在每次函数启动时更新

最初单击标记时，它会从DOM中删除最近的tr。然后再次单击标记时，只有在尚未单击tr索引的情况下，才能成功删除产品。i、 我成功地从表中删除了第一行，然后第二行成为第一行。我无法删除新的第一行，只能删除新的第二行

HTML:

---

由于表中有许多元素，每个元素的数据属性中都设置了自己独特的产品密钥，因此每次单击标记时，函数都应激发并获取最接近的数据属性值。Vue是否以某种方式索引了我表中的行，并且因为我正在更新DOM，所以不知道如何更新我方法中的变量？

不是解决方案，但为什么不直接将

part.productKey

传递给

removeProduct

方法，而不是从

数据产品密钥
属性中提取它呢？例如，
@click=“removeProduct（part.productKey）”
和
removeProduct:function（productKey）{…}
作为解决方案，请尝试将
:key=“part.productKey”
添加到您的
中，我在问题顶部链接的重复项应该会有所帮助，但如果它们没有，让我知道，我会回答你的问题。@Phil这太棒了，非常感谢。1）看。2） 您的浏览器正在提供一个全局
事件
变量。与大多数全局方法一样，依赖此方法并不好。这不是一个解决方案，但为什么不直接将
part.productKey
传递给
removeProduct
方法，而不是从
数据产品密钥
属性中提取它呢？例如，
@click=“removeProduct（part.productKey）”
和
removeProduct:function（productKey）{…}
作为解决方案，请尝试将
:key=“part.productKey”
添加到您的
中，我在问题顶部链接的重复项应该会有所帮助，但如果它们没有，让我知道，我会回答你的问题。@Phil这太棒了，非常感谢。1）看。2） 您的浏览器正在提供一个全局
事件
变量。和大多数环球选手一样，依靠这个是不好的。
<tbody>
    <tr v-for="(part) in parts" v-bind:data-product-key="part.productKey">
        <td>{{ part.productCategoryTitle }}</td>
        <td>{{ part.productName }}</td>
        <td>{{ part.productSKU }}</td>
        <td><input type="number" @focus="storeInitialQuantity" @blur="updateQuantity" min="0" step="1" v-bind:value="part.productQuantity"></td>
        <td><i class="fas fa-times-circle text-danger fa-2x" v-bind:data-product-key="part.productKey" v-on:click="removeProduct"></i></td>
    </tr>
</tbody>

window.vmOrderForm = new Vue({
    el: '#v-order-data',
    data: {
        parts: [],
    },
    methods: {
        removeProduct: function( event ) {
            let _this = this,
                tableRow = $( event.target ).closest( 'tr' ),
                productKey = tableRow.data( 'product-key' );

            console.log( productKey );

            tableRow.addClass( 'removing' );

            $.ajax({
                url: ajaxObject.ajaxUrl,
                method: 'post',
                data: {
                    action: 'get_order_data',
                    productKey: productKey,
                    quantity: 0,
                },
                success: function( response ) {
                    _this.parts = response.data;
                },
                complete: function() {
                    tableRow.removeClass( 'removing' );
                },
            });
        },
    }
});