I have such a component.
This is accordion with checkboxes (unnecessary code I removed for brevity)
Vue = require 'vue/dist/vue.js'checkordion = Vue.component "checkordion",props: ['columns']data: ->returnspoilers: [{shown: false}]isDataSet: falsemethods:toggleSpoilers: (key) ->that = thisthat.spoilers.forEach (spoiler, index) ->if index == keyif spoiler.shownspoiler.shown = falseelsespoiler.shown = trueelsespoiler.shown = falsesetInnerCheckboxes: (type, value) ->this.columns.array.forEach (item, index) ->if type == item.typeitem.visible = valueupdated: ->that = thisif !this.isDataSetObject.keys(this.columns.categories).forEach (key) ->spoiler = {shown: false}that.spoilers.push spoilerthat.isDataSet = truemodule.exports = checkordion{{category.label}}
He gets props object with two arrays of category checkboxes, which I get amount of spoilers accordion, and an array of objects checkboxes.
Opens and closes properly everything works correctly, but when I render there is a bug in :class="{'checkordion__section--opened': spoilers[key].shown}" the fact that the propetry spoilers[key].shown of undefined Why are undefined... I don't really understand.
Wrote several hooks. mounted - spoilers[0].shown available. created - available, updated, available, beforeUpdate available. key in the template is available.
Why Vue swears?