Javascript 在Vue.js中从购物车中永久删除项目，并使用AJAX进行Shopify

正在寻找有关在shopify主题中使用Vue.js从微型购物车中删除产品的帮助。下面是minicart.liquid文件，下面是存储在datat属性中的购物车数据。“删除”功能确实会删除ite，但当浏览器id刷新时，产品会重新出现且不会保存。寻找一些解决这个问题的指南

我也尝试过这个-

this.cart.items.splice（this.cart.items.indexOf（find），1）对象被删除，但当页面刷新时，产品再次显示在购物车中

  <template v-if="cart">
      <li class="media" v-for="(item, index) in cart.items">
          <template v-if="item.image">
              <a :href="item.url">
                <img class="img-fluid mr-4 mb-2" width="150" :src="item.image" alt="">
              </a>
          </template>
          <div class="media-body">

              <h5 class="title"><a :href="item.url">${ item.product_title }</a></h5>

              <template v-if="!item.product_has_only_default_variant">
                <p>${ item.variant_title }</p>
              </template>

              <div class="price">
                <template v-if="item.original_line_price != item.line_price">

                  <span class="visually-hidden">{{ 'cart.label.discounted_price' | t }}</span>
                    ${ item.price | money }
                  <span class="visually-hidden">{{ 'cart.label.original_price' | t }}</span>
                  <span>${ item.original_price | money }</span>

                </template>

                <template v-else>
                    ${ item.price | money }
                </template>
              </div>

              <!-- this is the function not working correctly -->
              <span @click="remove(item)">${ item.original_price | money }</span>


              <div class="input-group quantity mt-3">

                  <div class="input-group-prepend">
                    <!-- we add a click event listener to call the decrement function and pass item which refers to
                    the product variant as the parameter as this is what we want to remove -->
                    <span class="input-group-text" @click="decrement(item)">-</span>
                  </div>

                  <input type="text" v-model="item.quantity" class="form-control w-25" aria-label="Product quantity">

                  <div class="input-group-append">
                    <!-- we add a click event listener to call the increment function and pass item which refers to
                    the product variant as the parameter as this is what we want to add -->
                    <span class="input-group-text" @click="increment(item)">+</span>
                  </div>

              </div>

          </div>
      </li>

当我在console.log中记录productInfo时，我得到了ID和数量，只是不知道如何在单击时进行深入研究。
应该



不是
？
感谢您的反馈-此语法不起作用。如果刷新时它仍然存在，则它要么硬编码到购物车中，要么您从应用程序外部检索购物车数据，即
本地存储
、cookie、数据库、，etc@WhileyMai请不要把重复的问题贴出来，以此来反驳你的问题。这里有一些
    data(){
      return {
        //This data is stored in cartData.js
        cartData: store.state.cartData,
      }
    },

    methods: {
      //remove item from the Minicart
      remove(item){
        //this.cart.items refers to the data stored in our cartData object and used in the cart-template.liquid
        // i.e. <template v-for="(item, index) in cart.items">
        let found = this.cart.items.find(product => product.variant_id == item.variant_id);

        if(found) {
          //$delete is a vue function and can remove an item from an object
          //Now we want to remove the position/index of the variant item found above
          //We are saying if the product data fetched from Shopify matches our item product data, remove it
          this.$delete(this.cart.items, this.cart.items.indexOf(found))
          
        }
      },

      removeFromCart(){
        let productInfo = this.cart.items.reduce(
          (accumulator, target) => ({ ...accumulator, [target.variant_id]: target.quantity}),
        {});
        console.log(productInfo);
        //In order to update, we need to post an updates object with the key value pairs store in results
        axios.post('/cart/update.js', {updates: productInfo})
        .then((res) => {
          this.$delete(productInfo)
        })
        .catch((error) => {
          new Noty({
            type: 'error',
            timeout: 3000,
            layout: 'topRight',
            text: 'Cart not updated'
        }).show();
        })
      },