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

Question

我正在開發一個原型，所以一些字段是硬編碼的。 我可以知道為什么下面會拋出錯誤嗎？

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://v2.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

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

選項.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.vue 中以“**”突出顯示的部分更新為 JSON 中的“點”？

Answer 1

發生這種情況是因為在您的 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>

Answer 2

在這部分

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

您必須定義 A、B、C 屬性或數據。 例如，添加

data() {
    return {
      A: '',
      B: '',
      C: '',
    }
}

對於第二部分，最好的方法是添加一個計算屬性。

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