Dla pojedynczego komponentu (ShelfGridItem) chcę dynamicznie zmienić prop enabled.
ShelfGridItem.vue
<template>
<div :id="[id]" class="grid-item" :class="[priority, type, {disabled: !enabled}]">
.
.
.
</div>
</temaplate>
export default {
props: {
.
.
.
enabled: Boolean
},
created: function() {
if(this.enabled === undefined) {
this.enabled = true
}
.
.
.
}
Tablica komponentów jest trzymana w ShelfView.vue i przekazywana podczas tworzenia do ShelfGrid.vue
Z ShelfView.vue odbieram globalny event i chcę zmienić prop w jednym z elementów.
ShelfView.vue
<template>
<shelf-grid
id="app-tiles-grid"
style="width=100%; height: 100%;"
:tiles="this.appTiles"
>
.
.
.
</template>
export default {
components: {
ShelfGrid
},
created: function() {
this.appTiles = this.loadAppTiles() //laduje elementy
global.appState.on(sharedAppStates.canAdd, this.updateCanAdd)
},
methods: {
updateCanAdd: function(value) {
console.log(`recived: ${value}`)//odbieram nowa wartosc (dziala poprawnie)
//filtruje odpowiedni kafelek (dziala poprawnie)
var addToShelfTile = this.appTiles.filter(tile => {
return tile.link === "/action/add"
})
console.log('filtered tiles: ', addToShelfTile)
if(addToShelfTile[0] === undefined)
throw TypeError(`unable to find tile with link: /action/add`)
// Przypadek 1.
// w podgladzie obiektu w tablicy wartosc jest zmieniona, ale klasa sie nie zmienia, zmiana nie jest nawet rejstrowana w
// watchu w komponencie ShelfGridItem
addToShelfTile[0].enabled = value
// Przypadek 2.
// tu rzuca bledami ktorych jeszcze, nie googlalem :) a na pierwszy rzut oka na wiadomosc nic nie mowia :/
// Cannot use 'in' operator to search for 'undefined' in false
// at VueComponent.set [as $set]
this.$set(addToShelfTile[0].enabled = value)
console.log(`changes applaied to:`, addToShelfTile[0])
},
.
.
.
Z tego co wyczytałem update przez this.$set powinien być zarejestrowany bez problemu.
Czy to podejście do updatowania propów ma sens, czy są jakieś inne wzorce?
I gdzie popełniam błąd?
Z góry dzięki.