javascript - Adding item object to a Array from a vue composition API - Stack Overflow

admin管理员组

文章数量:1304960

I am trying to add the items passed from the props to a ref property using a vue-position API. But, I don't know why the items are not added to the array. Maybe I am using the spread operator in a wrong way or my implementation is wrong but the item is not added.

vue-position method is in a different file and it is used across the ponent.

I am passing the props to a product ponent in this way:

 <product
    :id="12345667"
    title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
    price="14.59"
    :rating="4"
    image="._AC_US160_.jpg"
  >
  </product>

Similarly, the product ponent is setup as:

   <template>

    <div class="product">
          <button type="button" @click="addToCart(item)">Add to Basket</button>
    </div>

   </template>

   <script>
    import { useCart } from "../js/ShoppingCart";
    
    export default {
      setup(props) {
        let item = props;
    
        const { addToCart } = useCart();
    
        return { item, addToCart };
      },
      props: {
        id: Number,
        title: String,
        image: String,
        price: String,
        rating: Number,
      }
    };
    </script>

ShoppingCart.js where I am using the @vue-position-api

import { ref } from "@vue/position-api";
export function useCart() {
  let basket = ref([]);
  const addToCart = async (item) => {
    // eslint-disable-next-line no-debugger
    debugger;
    return {
      ...basket,
      item,
    };
  };
  console.log(JSON.stringify(basket));
  return { basket, addToCart };
}

I don't know where do I did wrong, the basket array is always empty while calling from different ponents.

Updated Question:

<template>
  <div class="home">
    <img
      class="home__image"
      src="._CB432534552_.jpg"
    />

    <div class="home__row">
      <product
        :id="12345667"
        title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
        price="14.59"
        :rating="4"
        image="._AC_US160_.jpg"
      >
      </product>
      <product
        :id="12345667"
        title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
        price="14.59"
        :rating="4"
        image="._AC_US160_.jpg"
      >
      </product>
      {{ basket }}
      basket length {{ basket.value ? basket.value.length : 0 }}
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import Product from "@/ponents/Product.vue";
import { useCart } from "../js/ShoppingCart";
export default {
  setup() {
    const { basket } = useCart();
    return { basket };
  },

  name: "Home",
  ponents: {
    Product,
  },
};
</script>

I am trying to add the items passed from the props to a ref property using a vue-position API. But, I don't know why the items are not added to the array. Maybe I am using the spread operator in a wrong way or my implementation is wrong but the item is not added.

vue-position method is in a different file and it is used across the ponent.

I am passing the props to a product ponent in this way:

 <product
    :id="12345667"
    title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
    price="14.59"
    :rating="4"
    image="https://images-na.ssl-images-amazon./images/I/41Yo4bc2uiL._AC_US160_.jpg"
  >
  </product>

Similarly, the product ponent is setup as:

   <template>

    <div class="product">
          <button type="button" @click="addToCart(item)">Add to Basket</button>
    </div>

   </template>

   <script>
    import { useCart } from "../js/ShoppingCart";
    
    export default {
      setup(props) {
        let item = props;
    
        const { addToCart } = useCart();
    
        return { item, addToCart };
      },
      props: {
        id: Number,
        title: String,
        image: String,
        price: String,
        rating: Number,
      }
    };
    </script>

ShoppingCart.js where I am using the @vue-position-api

import { ref } from "@vue/position-api";
export function useCart() {
  let basket = ref([]);
  const addToCart = async (item) => {
    // eslint-disable-next-line no-debugger
    debugger;
    return {
      ...basket,
      item,
    };
  };
  console.log(JSON.stringify(basket));
  return { basket, addToCart };
}

I don't know where do I did wrong, the basket array is always empty while calling from different ponents.

Updated Question:

<template>
  <div class="home">
    <img
      class="home__image"
      src="https://images-na.ssl-images-amazon./images/G/01/AmazonExports/Fuji/2020/May/Hero/Fuji_TallHero_45M_es_US_2x._CB432534552_.jpg"
    />

    <div class="home__row">
      <product
        :id="12345667"
        title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
        price="14.59"
        :rating="4"
        image="https://images-na.ssl-images-amazon./images/I/41Yo4bc2uiL._AC_US160_.jpg"
      >
      </product>
      <product
        :id="12345667"
        title="Pampers 9x Sensitive Baby Wet Wipes Filler, 576 Diaper Wipes"
        price="14.59"
        :rating="4"
        image="https://images-na.ssl-images-amazon./images/I/41Yo4bc2uiL._AC_US160_.jpg"
      >
      </product>
      {{ basket }}
      basket length {{ basket.value ? basket.value.length : 0 }}
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import Product from "@/ponents/Product.vue";
import { useCart } from "../js/ShoppingCart";
export default {
  setup() {
    const { basket } = useCart();
    return { basket };
  },

  name: "Home",
  ponents: {
    Product,
  },
};
</script>

• javascript
• vuejs2
• vue-position-api

Share Improve this question Follow edited Aug 19, 2020 at 18:13 Rasik asked Aug 19, 2020 at 16:40 RasikRasik 2,42055 gold badges4747 silver badges9090 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I don't see any place in there where you're actually updating the basket array.

Also, you're not capturing the returned value, so you can remove it, and you may not need async function

You should be able to use basket.value.push(item);

ShoppingCart.js

import { ref } from "@vue/position-api";
export function useCart() {
  let basket = ref([]);
  const addToCart = (item) => {
    basket.value.push(item);
  };
  return { basket, addToCart };
}

or basket.push(item); if you switch ref for reactive

ShoppingCart.js

import { reactive } from "@vue/position-api";
export function useCart() {
  let basket = reactive([]);
  const addToCart = (item) => {
    basket.push(item);
  };
  return { basket, addToCart };
}

---

Update #1:

in your template you're using {{ basket.value ? basket.value.length : 0 }}

One problem is that value is resolved through the template, so you should not use it in the template.

---

Update #2:

Looks like you're trying to use useCart as a global store. The reason that it's not working is that you are creating a new store every time you instantiate useCart

if you run it like this, it will create a new instance:

import { ref } from "@vue/position-api";
export function useCart() {
  let basket = ref([]); // <--- new store, local to function
  const addToCart = (item) => {
    basket.value.push(item);
  };
  return { basket, addToCart };
}

but if you update it to this

import { ref } from "@vue/position-api";
let basket = ref([]); // <--- same store, global
export function useCart() {
  const addToCart = (item) => {
    basket.value.push(item);
  };
  return { basket, addToCart };
}

useCart() will now reuse the same ref

Update #3:

Haven't tested, but you could try this as-well to get around the error in Vue2

import { ref, isRef } from "@vue/position-api";
let basket;
export function useCart() {
  if (! isRef(basket)) basket = ref([]);
  const addToCart = (item) => {
    basket.value.push(item);
  };
  return { basket, addToCart };
}

本文标签： javascriptAdding item object to a Array from a vue composition APIStack Overflow