Реквизиты не работают в моем приложении 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
<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>
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.vue, до «точек» из JSON в зависимости от того, что выбрано на родительской странице?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это происходит из-за того, что в файле Recommended.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>
@yeeen видит второй фрагмент кода в моем ответе, он делает то, что вы хотите. Вы не должны использовать: если вам нужны значения, а не переменные. : означает привязку переменных
По этой части
<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-модель, если сочтете ее более подходящей для вашего варианта использования.
ОБНОВЛЕНИЕ от @yeeen: Вместо этого я использовал цикл for, чтобы получить нужные мне очки. Пояснение в комментариях
computed: {
selectedPoints() {
for(let i=0; i<this.options.length; i++) {
console.info(this.options[i]);
if (this.options[i].value == this.current)
return this.options[i].points
}
return 0;
}
}
Я просто хочу, чтобы A, B, C как строка, а не переменные ... соответствовали A, B, C в параметрах JSON. Таким образом, я могу установить по умолчанию один из вариантов на основе переданных в строке параметров: [{title: 'Skill A', value: 'A', points: 6}, {title: 'Skill B', value: 'B ', баллов: 5}, {title:' Навык C ', значение:' C ', баллов: 4}]
Если вы хотите передать только строку, удалите ":". Итак, это просто <AppOption selected = "A"> </AppOption>
Рад, что смог помочь.
Спасибо также за вторую часть. Я не могу использовать this.current.points, потому что точки r хранятся в this.options. Но у меня есть идея! Я обновлю твои ответы и награжу тебя баллами!
Я просто хочу, чтобы A, B, C как строка, а не переменные ... соответствовали A, B, C в параметрах JSON. Таким образом, я могу установить по умолчанию один из вариантов на основе переданных в строке параметров: [{title: 'Skill A', value: 'A', points: 6}, {title: 'Skill B', value: 'B ', баллов: 5}, {title:' Навык C ', значение:' C ', баллов: 4}]