How to import javascript from component to another component?

Question

i'm trying to do mini shop app in VueJS without backend, only adding items to shopping cart.

I have component One(Nmdgrey.vue), where i have eg boots and "Add to cart" button.

<button @click="addToCart">Add to cart</button>

And function in first component:

methods: {
addToCart() {
  const boots = { name: 'adidas nmd' };
  this.cart.push(boots);

  }
} 

And i have component Two, where i have shopping cart

<div v-for="item in cart">
  {{item.name}}
</div>

And JS

import Nmdgrey from '@/components/Nmdgrey.vue';
export default {
  name: 'Shoppingcart',
  components: 
    Nmdgrey,
  data() {
    return {
      cart: [
        { name: 'adidas adizero' },
      ]
    }
  },
 };

How i can add boots from component One to list in component Two?

I have this.cart.push(boots); in component One but it didn't work

This is what i want but button didn't work: codesandbox

Answer 1

Use $emit, when child components need to communicate with parent.

Refer official doc: Listening-to-Child-Components-Events

Nmdgrey.vue

<template>
  <div>
    <!-- component 1 -->
    <button @click="add">Add to cart</button>
  </div>
</template>

<script>
export default {
  name: "Numdgrey",
  methods: {
    add() {
      const boots = { name: "adidas nmd" };
      this.$emit("add", boots);
    }
  }
};
</script>

Shoppingcart.vue

<template>
  <div>
    <!-- component 2 -->
    <nmdgrey @add="addCart"></nmdgrey>
    <br>
    <div v-for="(item, index) in cart" :key="index">{{item.name}}</div>
  </div>
</template>

<script>
import Nmdgrey from "./Nmdgrey.vue";
export default {
  name: "ShoppingCart",
  components: {
    Nmdgrey
  },
  data() {
    return {
      cart: [{ name: "adidas adizero" }]
    };
  },
  methods: {
    addCart(good) {
      this.cart.push(good);
    }
  }
};
</script>

Codesandbox demo : https://codesandbox.io/s/z2qz6oy8yp

Answer 2

you need to create a post method where you take over everything you need from one page to another page. after that everything will get into the cart and you will be able to create your page.

Answer 3

Codesandbox demo : https://codesandbox.io/s/94l44j8j14

Use props to pass the values to cart component.

Nmdgrey.vue

<template>
<div>
  <b>Component 1 : NmdGrey</b><br><br>
<button v-for="(product, index) in boots" :key="index"
@click="addToCart(product.name)" >Add {{product.name}} to Cart</button>
<br><br><hr><br> 
  <shoppingcart :cart="cart" />
  </div>
</template>

<script>
import shoppingcart from './shoppingcart.vue';
export default {
name: 'Nmdgrey',
components:{shoppingcart},
data() {
    return {
      boots:[{name: 'adidas adizero'}, {name: 'puma walker'}, {name: 'nike shoe'}, {name: 'adidas plain'}],
      cart:[],
    }
  },
  methods: {
addToCart(boots) {
  this.cart.push({ name: boots });

  }
} 

}
</script>

Shoppingcart.vue

<template>
  <div>
    <b>Component 2 : Shopping cart</b>
    <br>
    <br>
    <div v-for="(product, index) in cart" :key="index">{{product.name}}</div>
  </div>
</template>

<script>
export default {
  name: "Shoppingcart",
  props: ["cart"],
  data() {
    return {};
  }
};
</script>

Answer 4

Well, If your application is small, then you can create Vue mixins for addToCart and call it whenever you'll require in your component.

Similar to the methods, you can share data across the components with the use of mixins .

Here is the mixins official docs

Here is the working JsFiddle

Hope this helps!

Answer 5

From your post I've deduced that what you want to do is to share data from two or more Vue components. For this purpose, you could use Vuex , which provides centralized state management.

This way you could use a vuex mutation to add items to the cart, which could be used from any component. You would also be able to retrieve the cart data from any of them by using vuex getters.