How to pass props to input value in Vuejs

user_16315061 0
Viewed 1593

I have a parent component as a Cart. Here I defined quantity and I want to pass this quantity to the child component's input value which is Counter. So here how I am passing it and here is my parent component, Cart:

<Counter quantity="item.quantity"/>

And here is my child component, Counter:

<template>
    <div id="counter">
        <button class="minus" @click="countDown"><i :class="quantity == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>
        <div class="count-number"><input class="counter-content" type="number" v-model="quantity"></div>
        <button class="plus" @click="countUp"><i class="fas fa-plus"></i></button>
    </div>
</template>
<script>
    export default {
        props: {
            quantity: Number
        },
        methods: {
            countUp() {
                this.quantity++;
            },
            countDown() {
                if(this.quantity > 0) {
                    this.quantity--;
                }
            },
        }
    }
</script>

I am quite new in Vue, so maybe I am doing something wrong when I pass the props. So could you help me about this?

vue-props vuejs2 vue.js
2 Answers

Try (with the : colon sign)

<Counter :quantity="item.quantity"/>

Before you were just passing the string "item.quanity"

I see you're modifying your prop directly:

            countUp() {
                this.quantity++;
            },
            countDown() {
                if(this.quantity > 0) {
                    this.quantity--;
                }
            },

This is not how you do it in Vue. You need to use two way binding.

countUp() {
  this.$emit('input', this.quantity+1)
}

countDown() {
  this.$emit('input', this.quantity-1)
}

and in your parent component:

<Counter :quantity="item.quantity" @input="(payload) => {item.quantity = payload}"/>

By the way, the Vue styleguide recommends to use multi-word component names: https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential (Cart = bad, MyCart = good)

Admin1

We cannot change the value that we get from props, so I created a variable and put props there when mounting

Try it

<Counter :quantity="item.quantity"/>

and

<template>
  <div id="counter">
    <button class="minus" @click="countDown"><i :class="sum == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>
    <div class="count-number"><input class="counter-content" type="number" v-model="sum"></div>
    <button class="plus" @click="countUp"><i class="fas fa-plus"></i></button>
  </div>
</template>

<script>
export default {
  props: {
    quantity: Number
  },
  data: () => ({
    sum: 0
  }),
  mounted() {
    this.sum = this.quantity;
  },
  methods: {
    countUp() {
      this.sum++;
    },
    countDown() {
      if(this.sum > 0) {
        this.sum--;
      }
    },
  }
}
</script>
user_86270790
Related