Vuejs의 입력값에 소품을 전달하는 방법

Vuejs의 입력값에 소품을 전달하는 방법

상위 컴포넌트를 카트로 가지고 있다.여기서 수량을 정의했으며 이 수량을 자성분의 입력 값인 카운터로 전달하려고 합니다.다음은 전달 방법이고 다음은 부모 구성 요소인 카트입니다.

<Counter quantity="item.quantity"/>

그리고 여기 내 자식 컴포넌트 카운터:

<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>

저는 Vue에 처음 와서 소품을 지나칠 때 뭔가 잘못하고 있는 것 같아요.그러니 이것 좀 도와주실 수 있나요?

시도합니다(콜론 기호 포함).

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

그냥 "아이템"이라는 문자열을 건네기 전에요quanity"

---

소품을 직접 수정하는군요.

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

Vue에서는 이렇게 하는 것이 아닙니다.쌍방향 바인딩을 사용해야 합니다.

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

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

부모 컴포넌트:

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

---

참고로 Vue 스타일가이드는 https://vuejs.org/v2/style-guide/#Multi-word-component-names-ential(카트=불량, MyCart=양호)이라는 여러 단어 구성 요소 이름을 사용할 것을 권장합니다.

소품에서 얻을 수 있는 가치를 바꿀 수 없기 때문에 변수를 만들어 소품을 장착했습니다.

먹어봐.

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

그리고.

<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>

언급URL : https://stackoverflow.com/questions/69041173/how-to-pass-props-to-input-value-in-vuejs