Почему параметры v-bind не могут ссылаться на переменную в объекте?
В приведенном ниже коде работает только #3. Почему я не могу передать переменную showAlert1 из alertObj?
Кроме того, как работает #3? извлекает ли он первую логическую переменную из объекта?
PS. Я не уверен, почему StackOverflow не показывает Vue в качестве опции при выполнении кода (или как правильно его импортировать)
var app = new Vue({
el: '#app',
data: {
alertObj: [{
showAlert1: true
}]
}
}).alert {
background-color: yellow;
}<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id = "app">
<div v-bind:class = "{alert:alertObj.showAlert1}">#1</div>
<div v-bind:class = "{alert:showAlert1}">#2</div>
<div v-bind:class = "{alert:alertObj}">#3</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Во-первых, когда вы связываете класс с переменной, которая находится рядом с двоеточием, она оценивается как логическое значение.
alert:alertObj.showAlert1, в вашем примере alertObj.showAlert1 будет оцениваться как Boolean(alertObj.showAlert1).
Так,
- alertObj.showAlert1 вернет
undefined. alertObj не имеет ключа showAlert1 - alert: showAlert1 вернет
undefined, потому что у вас нет свойства showAlert1 - alertObj вернет
true, поэтому класс применяется
Почему сам по себе alertObj возвращает true? И у alertObj ДЕЙСТВИТЕЛЬНО есть ключ внутри него с именем "showAlert1", я не совсем понимаю, что означает "ключ" ...
потому что у него есть массив. Только такие значения, как undefined, null, false, "" будут оценены как false.
alertObj- это массив, вам сначала нужен индекс.alertObj[0].showAlert1