Почему vue выбрасывает warn error, хотя всё работает правильно?

Question

[Никита Кит]

Есть у меня такой компонент.
Это аккордеон с чекбоксами (лишний код я убрал, для краткости)

<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 ругается?

Answer 1

[Evgeny Kulakov]

Можно проверку добавить:

{'checkordion__section--opened': spoilers && spoilers[key].shown}

Comments

[Никита Кит]

Да, спасибо, помогло: spoilers[key] && spoilers[key].shown
Видимо проблема была в том, что каждый each в updated вызывал перерисовку, и когда не все push были готовы spoilers[1] или spoilers[2] вызывал ошибку