Есть у меня такой компонент.
Это аккордеон с чекбоксами (лишний код я убрал, для краткости)
<script lang='coffee'>
Vue = require 'vue/dist/vue.js'
checkordion = Vue.component "checkordion",
props: ['columns']
data: ->
return
spoilers: [{shown: false}]
isDataSet: false
methods:
toggleSpoilers: (key) ->
that = this
that.spoilers.forEach (spoiler, index) ->
if index == key
if spoiler.shown
spoiler.shown = false
else
spoiler.shown = true
else
spoiler.shown = false
setInnerCheckboxes: (type, value) ->
this.columns.array.forEach (item, index) ->
if type == item.type
item.visible = value
updated: ->
that = this
if !this.isDataSet
Object.keys(this.columns.categories).forEach (key) ->
spoiler = {shown: false}
that.spoilers.push spoiler
that.isDataSet = true
module.exports = checkordion
</script>
<template>
<div class='checkordion'>
<div class='checkordion__section' v-for='(category, key) in columns.categories' :class="{'checkordion__section--opened': spoilers[key].shown}">
<div class='checkordion__header'>
<checkbox v-model='category.visible'></checkbox>
<div class='checkordion__label' @click="toggleSpoilers(key)">{{category.label}}</div>
</div>
<div class='checkordion__body'>
<div class='checkordion__checkbox' v-if='item.type === category.type' v-for='item in columns.array'>
<checkbox v-model='item.visible' :label='item.value'></checkbox>
</div>
</div>
</div>
</div>
</template>
Он получает в props объект с двумя массивами - категории чекбоксов, от которых я получаю количество спойлеров аккордеона, и массив объектов чекбоксов.
Открывается и закрывается всё правильно, работает правильно, но при рендере мне вылетает ошибка в :class="{'checkordion__section--opened': spoilers[key].shown}" о том что propetry spoilers[key].shown of undefined... Почему undefined я не особо понимаю.
Написал несколько хуков. mounted - spoilers[0].shown - доступен. created - доступен, updated - доступен, beforeUpdate - доступен. key в шаблоне - доступен.
Почему Vue ругается?
