Javascript 道具在我的Vue.js应用程序中不起作用

我正在开发一个原型，因此一些字段是硬编码的。 我可以知道为什么下面是投掷错误吗

vue.runtime.esm.js:587 [Vue warn]: Property or method "A" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Recommendation> at components/Recommendations.vue
       <HomePage> at pages/profile.vue
         <Nuxt>
           <Default> at layouts/default.vue
             <Root>

vue.runtime.esm.js:587[vue warn]：属性或方法“A”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。
发现于
--->at components/Recommendations.vue
在第页/profile.vue
在layouts/default.vue处

建议1.vue

<template>
    <div class="recommendations">
        <div class="recommendations__content">
            <AppOption :selected="A"></AppOption>
            <AppOption :selected="B"></AppOption>
            <AppOption :selected="C"></AppOption>
        </div>
    </div>
</template>

<script>
import AppOption from '@/components/Option.vue'

export default {
    name: 'Recommendation',
    components: {
        AppOption
    },
    data() {
        return {
        }
    }
}
</script>

从“@/components/Option.vue”导入AppOption
导出默认值{
名称：'推荐'，
组成部分：{
任命
},
数据（）{
返回{
}
}
}

Option.vue

<template>
    <div>
        <b-field>
            <b-select
                placeholder="Select skill"
                v-model="current"
                size="is-medium"
                expanded>

                <template v-for="option in options">
                    <option :value="option.value" v-bind:key="option.value">{{ option.title }} </option>
                </template>
            </b-select>
        </b-field>
        <div class="recommendations__content__row">
            <div class="fieldset">
                <label>Current:</label>
                **<input type="text" value="6.0" disabled>**
            </div>
            <div class="fieldset">
                <label>Goal:</label>
                <input type="text" value="8.0">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['selected'],
    data() {
        return {
            current: this.selected,
            options: [
                { title: 'Skill A', value: 'A', points: 6},
                { title: 'Skill B', value: 'B', points: 5},
                { title: 'Skill C', value: 'C', points: 4}
            ]
        }
    }
}
</script>

{{option.title}}
当前：
****
目标：
导出默认值{
道具：[“选定的”]，
数据（）{
返回{
当前：选中此项，
选项：[
{标题：'技能A'，价值：'A'，分数：6}，
{标题：“技能B”，值：“B”，点数：5}，
{标题：“技能C”，值：“C”，点数：4}
]
}
}
}

---

另外，我如何根据父页面选择的内容将Option.vue中以“**”突出显示的部分从JSON更新为“点”？

之所以发生这种情况，是因为在您的Recommendations.vue中您引用了A、B和C变量，但您没有在数据部分声明它们

因此，如果希望它们成为变量，则需要声明它们：

export default {
    name: 'Recommendation',
    components: {
        AppOption
    },
    data() {
        return {
           A: 'A',  
           B: 'B',
           C: 'C',      
        }
    }
}

或者，如果只想使用A、B和C作为值，则不需要绑定：

---

之所以发生这种情况，是因为在您的Recommendations.vue中引用了A、B和C变量，但您没有在数据部分声明它们

因此，如果希望它们成为变量，则需要声明它们：

export default {
    name: 'Recommendation',
    components: {
        AppOption
    },
    data() {
        return {
           A: 'A',  
           B: 'B',
           C: 'C',      
        }
    }
}

或者，如果只想使用A、B和C作为值，则不需要绑定：

关于此零件

        <AppOption :selected="A"></AppOption>
        <AppOption :selected="B"></AppOption>
        <AppOption :selected="C"></AppOption>

对于第二部分，最好的方法是添加一个计算属性

computed: {
        selectedPoints() {
            return this.current.points 
        }
    }

加

**<input type="text" :value="selectedPoints" disabled>**

****

在第二部分中，如果您发现v-model更适合您的用例，那么您也可以使用它

---

@yeeen更新： 我使用for循环来获得我想要的点。评论中的解释

computed: {
    selectedPoints() {
        for(let i=0; i<this.options.length; i++) {
            console.log(this.options[i]);
            if (this.options[i].value == this.current)
                return this.options[i].points
        }
        return 0;
    }
}

计算：{
选定点（）{
对于（设i=0；i）这部分

        <AppOption :selected="A"></AppOption>
        <AppOption :selected="B"></AppOption>
        <AppOption :selected="C"></AppOption>

对于第二部分，最好的方法是添加一个计算属性

computed: {
        selectedPoints() {
            return this.current.points 
        }
    }

加

**<input type="text" :value="selectedPoints" disabled>**

****

在第二部分中，如果您发现v-model更适合您的用例，那么您也可以使用它


@yeeen更新：
我使用for循环来获得我想要的分数。注释中的解释

computed: {
    selectedPoints() {
        for(let i=0; i<this.options.length; i++) {
            console.log(this.options[i]);
            if (this.options[i].value == this.current)
                return this.options[i].points
        }
        return 0;
    }
}

计算：{
选定点（）{
for（设i=0；iI只希望A、B、C作为字符串，而不是变量…对应于JSON选项中的A、B、C。因此，我可以根据传入的字符串选项将默认值设置为选项之一：[{title:'Skill A'，value:'A'，points:6}，{title:'Skill B'，value:'B'，points:5}，{标题：“技能C”，值：“C”，点数：4}]@yeeen在我的回答中看到第二段代码，它做了你想要的。你不应该使用：如果你想要值，而不是a变量。：意味着变量绑定我只想要a，B，C作为字符串，而不是变量…对应于JSON选项中的a，B，C。因此我可以根据传入的字符串选项将默认设置为选项之一：[{title:'Skill A'，value:'A'，points:6}，{title:'Skill B'，value:'B'，points:5}，{title:'Skill C'，value:'C'，points:4}]@yeeen在我的回答中看到第二段代码，它做了你想要的。你不应该使用：如果你想要值，而不是a变量。：意味着变量绑定我只想要a，B，C作为字符串，而不是变量…对应于JSON选项中的a，B，C。因此我可以根据传入的字符串选项将默认设置为选项之一：[{title:'Skill A'，value:'A'，points:6}，{title:'Skill B'，value:'B'，points:5}，{title:'Skill C'，value:'C'，points:4}]如果只想传递字符串，请删除“：”.所以，很高兴我能提供帮助。也感谢第二部分。我不能使用这个.current.points，因为这个.options中存储了点r。但是我得到了这个想法alr！我会更新你的ans并将点奖励给你！我只希望A，B，C作为字符串，而不是变量…对应于JSON选项中的A，B，C。这样我就可以将默认值设置为op中的一个基于传入的字符串选项执行操作：[{title:'Skill A'，value:'A'，points:6}，{title:'Skill B'，value:'B'，points:5}，{title:'Skill C'，value:'C'，points:4}]如果只想传递字符串，请删除“：”.所以，很高兴我能帮上忙。也感谢第二部分。我不能使用这个.current.points，因为这个.options中存储了点r。但是我得到了想法alr！我会更新你的ans并将分数奖励给你！