Vue.js problem z updatowaniem propów

0

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.

0

Doczytałem i poprawiłem, błędami już nie rzuca, ale dalej nie działa:
ShelfView.vue

    methods: {
        updateCanAdd: function(value) {
            console.log(`recived: ${value}`)

            var addToShelfTileIndex = this.appTiles.findIndex(tile => {
                return tile.link === "/action/add"
            })

            if(addToShelfTileIndex < 0)
                throw TypeError(`unable to find tile with link: /action/add`)

            var tile = this.appTiles[addToShelfTileIndex]

            this.appTiles[addToShelfTileIndex].enabled = value
            this.$set(this.appTiles, addToShelfTileIndex, this.appTiles[addToShelfTileIndex])

            console.log(`changes applaied to:`, this.appTiles[addToShelfTileIndex])
        },

Według tego: https://vuejs.org/v2/guide/list.html#Caveats powinno dać radę, a prop się nie odświeża...

1

Nie możesz zmieniać wartości propsów - Vue tak zwyczajnie nie działa.
Jeśli chcesz coś przesłać do komponentu rodzica, wykorzystaj eventy.

https://vuejs.org/v2/guide/components.html#Sending-Messages-to-Parents-with-Events

Rozszerzając: możesz do komponentu rodzica wysłać zdarzenie changeAppTiles i to w tamtym komponencie dopiero dokonać zmiany na appTiles - wtedy będzie działać.

1 użytkowników online, w tym zalogowanych: 0, gości: 1