Question

我的vue组件是这样的：

<template>
    <form>
        ...
        <a href="javascript:" data-toggle="modal" data-target="#modal-cart" class="btn btn-danger btn-block" @click="addToCart">
            <span class="fas fa-shopping-cart"></span> Add to cart
        </a>
        <modal-cart id="modal-cart" :id-product="product.id"></modal-cart>

    </form>
</template>

<script>
    import ModalCart from '../modal/ModalCart.vue'
    export default {
        components: {
            ModalCart
        },
        methods: {
            addToCart(event) {
                ...
                this.$store.dispatch('addToCart', data)
                .then((response) => {
                    if(response[0] == true) {
                        //call data-target="#modal-cart"
                    }
                })
            }
        }
        ...
    }
</script>

从代码中，如果我点击添加到购物车按钮，它会调用addToCart方法并立即拨打data-target="#modal-cart"

我想改变它。因此，如果我点击添加到购物车按钮，它将调用addToCart方法。如果数据成功保存，则调用data-target="#modal-cart"

我该怎么办？

Answer 1

您可以使用event.currentTarget访问该元素，然后从data-*对象访问您的dataset属性。因此，在您的情况下，最终映射应该是

event.currentTarget.dataset.target

第二个想法你也应该能够将data-attributes绑定到本地属性，然后使用它来更新它，比如

<a :data-target="localprop" ...>
....
<script>
  ...
  data: {
    localprop:'someValue'
  },
  ...
  addToCart: function() {
    ...
    this.data.localprop = "new value"
  }

这似乎更像是Vue编码风格，你可以避免查询dom。

在使用vue组件保存数据后，如何调用数据目标？

1 个答案: