Vue.js 道具一直以$attrs的形式出现

通过单击

我试图将属性

planId

从我的

订阅.vue

组件传递到我的

支付表单.vue

组件：

一切都应该正常，但是

PaymentForm.vue

中的computed属性

computedPlanId（）

一直没有定义。我查看了我的vue开发工具，发现我的

道具：[]

显示为

$attrs

。这导致

This.planId

在

PaymentForm.vue

订阅。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>

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

{{plan.name}
${{plan.price}

订阅


从“axios”导入axios
导出默认值{
数据（）{
返回{
计划：空，
setAuthHeader:axios.defaults.headers.common['Authorization']='Bearer'+this.$store.state.token，
planId:null
}
},
创建（）{
这个.getPlans（）；
},
方法：{
getPlans（）{
此文件为.setAuthHeader
//axios呼叫，获取计划
},
订阅计划（id）{
this.planId=id；
}
}
}

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

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

{{planId}}
持卡人姓名
处理付款
从“axios”导入axios
设stripe=stripe（`pk\u test\u key`），
elements=stripe.elements（），
卡片=未定义；
导出默认值{
道具：['planId']，
挂载：函数（）{
卡片=元素。创建（'card'）；
挂载（此$refs.卡）；
},
数据（）{
返回{
持卡人姓名：“”，
setAuthHeader:axios.defaults.headers.common['Authorization']='Bearer'+this.$store.state.token，
}
},
计算：{
计算动作（）{
返回“/api/checkout”；
},
computedPlanId（）{
把这个还给我
}
},
方法：{
处理付款（）{
//条纹材料
},
submitPaymentForm（付款方式）{
//到服务器的Axios表单请求
}
},
}

---

为什么我的道具显示为$attrs，我该如何解决这个问题？

你为什么认为这个道具显示为

$attrs

是问题所在？我相信这就是导致我无法在我的支付组件中使用

this.planId

的原因。你能确认这是否是你的

支付表单

组件中的打字错误吗，当你使用

prop

而不是

props

时，我看到了与@YomS.Yup相同的打字错误，这就是问题所在<代码>道具被认为是

道具