реквизит продолжает появляться как $ attrs - PullRequest
Новая
       0

реквизит продолжает появляться как $ attrs

1 голос
/ 08 мая 2020

Нажимая на <button class="sub-button" @click="subscribeToPlan(plan.id)">, я пытаюсь передать свойство planId из моего Subscriptions.vue компонента моему PaymentForm.vue компоненту: <payment-form :plan-id="planId"></payment-form>

Все должно работать, но вычисленное свойство computedPlanId() от PaymentForm.vue продолжало появляться undefined. Я заглянул в свои инструменты разработки vue, оказалось, что мой props: [] отображается как $attrs. Это приводит к тому, что this.planId появляется как undefined в PaymentForm.vue

Subscriptions. vue

<template>
    <div>
        <div class="subscription-card">

            <div class="flex-container">
                <div class="flex-item" v-for="plan in plans">
                    <ul class="package">
                        <li class="header highlight">{{plan.name}}</li>  
                        <li>${{plan.price}}</li>
                        <li class="gray">
                            <button  class="sub-button" @click="subscribeToPlan(plan.id)">Subscribe</button>
                        </li>
                    </ul>
                </div>
            </div>

             <div class="flex-container">
                <payment-form :plan-id="planId"></payment-form>
            </div>

        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                plans : null,
                setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
                planId: null
            }
        },
        created() {
            this.getPlans();
        },
        methods: {
            getPlans(){
                this.setAuthHeader
                //axios call that gets plans
            },
            subscribeToPlan(id){
                this.planId = id;
            }
        }
    }
</script>

PaymentForm. vue

<template>
    <div>
        {{planId}}
        <form :action="computedAction" method="POST" id="payment-form" @submit.prevent="processPayment()">
            <label for="">Card Holder Name</label>
            <input id="card-holder-name" v-model="cardHolderName" type="text">

            <!-- Stripe Elements Placeholder -->
            <div ref="card"></div>

            <button type="submit">
                Process Payment
            </button>
        </form>
    </div>
</template>

<script>
    import axios from 'axios'
    let stripe = Stripe(`pk_test_key`),
    elements = stripe.elements(),
    card = undefined;

    export default {
        prop: ['planId'],
        mounted: function () {
            card = elements.create('card');
            card.mount(this.$refs.card);
        },
        data () {
            return {
                cardHolderName: '',
                setAuthHeader: axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.$store.state.token,
            }
        },
        computed: {
            computedAction() {
                return '/api/checkout';
            },
            computedPlanId() {
                return this.planId
            }
        },
        methods: {
            processPayment(){

                //Stripe stuff
            },
            submitPaymentForm(paymentMethod){

                //Axios form reques to server
            }
        },
    }
</script>

Почему мои реквизиты отображаются как $ attrs и как это исправить?

...