Как получить доступ к переменной внутри массива в Vue JS
Javascript и Vue для начинающих здесь. Пробуем примеры, чтобы изучить основные понятия.
<template>
/*<p v-bind:class = "['bold', 'italic', isValid ? 'valid' : 'invalid']">*/
<p v-bind:class = "classArray">
Hello, {{name[0]}} {{name[1]}}
</p>
</template>
<script>
export default {
data() {
return {
isValid: true,
name: ['John','Doe'],
classArray: ['bold', 'italic', isValid ? 'valid' : 'invalid']
}
}
}
</script>
<style>
.bold { font-weight: bolder }
.italic { font-style: italic }
.valid { color: forestgreen }
.invalid { color: crimson }
</style>
Приведенный выше код выдает следующую ошибку:
ОШИБКА [эслинт] /js/vue3/src/App.vue 16:38 ошибка isValid не определена no-undef
✖ 1 проблема (1 ошибка, 0 предупреждений)
Как мне получить доступ к «isValid» внутри classArray?
И даже если вы это исправите, так будет всегда true, потому что вы только что это инициализировали. Я предполагаю, что вы хотите classArray измениться при переназначении isValid. Вам нужно будет определить сеттер для isValid, который будет обновлять classArray.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Определите classArray как геттер, который проверяет текущее значение isValid объекта.
export default {
data() {
return {
isValid: true,
name: ['John','Doe'],
get classArray() { return ['bold', 'italic', this.isValid ? 'valid' : 'invalid']; }
}
}
}
Геттер в data() — плохое предложение. Вы не найдете упоминания об этом в документации, и я не могу предсказать возможные последствия. Другой ответ правильный: для этого и нужны вычисления.
@EstusFlask Это более общее решение, не специфичное для vue.js, с которым я не знаком.
Вы можете использовать вычисляемое свойство для classArray, чтобы оно могло правильно ссылаться на isValid из данных компонента. Сделайте снимок
<template>
<p v-bind:class = "classArray">
Hello, {{ name[0] }} {{ name[1] }}
</p>
</template>
<script>
export default {
data() {
return {
isValid: true,
name: ['John', 'Doe']
}
},
computed: {
classArray() {
return ['bold', 'italic', this.isValid ? 'valid' : 'invalid'];
}
}
}
</script>
<style>
.bold { font-weight: bolder }
.italic { font-style: italic }
.valid { color: forestgreen }
.invalid { color: crimson }
</style>
Спасибо. Это сработало. Научились новым способам достижения желаемого результата.
@VenkatD Вот как это обычно делается, а не так, как предложено в принятом ответе.
Вы не можете ссылаться на свойство объекта внутри инициализатора объекта. Это необходимо сделать после того, как объект будет завершен.