Vue.js Компонент выброса - PullRequest
Новая
       29

Vue.js Компонент выброса

0 голосов
/ 06 апреля 2019

У меня есть проблема с компонентом $ emit

Это мой дочерний компонент: 

<template>
<div class="input-group mb-3 input-group-sm">
        <input v-model="newCoupon" type="text" class="form-control" placeholder="code">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button" @click="addCoupon">comfirm</button>
        </div>
      </div>
</template>
<script>
export default {
  props: ["couponcode"],
  data() {
    return {
      newCoupon: this.couponcode
    };
  },
  methods: {
    addCoupon() {
      this.$emit("add", this.newCoupon);
    }
  }
};
</script>

Это родительский компонент 

<template>
  <div>
<cartData :couponcode="coupon_code" @add="addCoupon"></cartData>
</div>
</template>

<script>
import cartData from "../cartData";
export default {
  components: {
    cartData
  },
  data() {
  return {
   coupon_code: ""
  }
 },
 methods:{
   addCoupon() {
      const api = `${process.env.API_PATH}/api/${
        process.env.CUSTOM_PATH
      }/coupon`;
      const vm = this;
      const coupon = {
        code: vm.coupon_code
      };
      this.$http.post(api, { data: coupon }).then(response => {
        console.log(response.data);
      });
    },
 }
}
</script>

Когда я нажимаю кнопку «Подтвердить» display на дисплее console.log «не удается найти купон»。 Если я не использую компонент ，, он будет работать。

В чем проблема? Это про выброс?

1 Ответ

0 голосов
/ 06 апреля 2019 
addCoupon() {
  this.$emit("add", this.newCoupon); // You emitted a param
}
// then you should use it in the listener
addCoupon(coupon) { // take the param
  const api = `${process.env.API_PATH}/api/${
    process.env.CUSTOM_PATH
  }/coupon`;
  const coupon = {
    code: coupon // use it
  };
  this.$http.post(api, { data: coupon }).then(response => {
    console.log(response.data);
  });
},
...