A
A
Alexander2019-12-12 17:37:57
Vue.js
Alexander, 2019-12-12 17:37:57

Why doesn't v-for reactivity work?

Reactivity does not work in v-for, I googled that you need to add an ID, it did not help. The variable is updated when the external element is clicked, new data is displayed in the console after the click, and the component is not updated

html component
<devices 
            v-for="device in roominfo"
            :key="device.id"
            :device="device"
        ></devices>

js component
Vue.component('devices', {
    props: ['device','key'],
    template: '<div class="roominfo"">{{ device.name }} - {{ key }}</div>'
});

APP
var app = new Vue({
    el: '#app',
    data: {
        devices: [],
        roominfo: []
    },
    created(){
        fetch('/smart-home.php')
            .then((response) => {
                if(response.ok) {
                    return response.json();
                }
            
                throw new Error('Network response was not ok');
            })
            .then((json) => {
                this.devices = json;
                this.getRoomDevices("133");
            })
            .catch((error) => {
                console.log(error);
            });
    },
    methods:{
        getrooms: function () {
            var rooms = new Set();
            for (let device of this.devices) {
                rooms.add(device.room);
            }
    
            return Array.from(rooms).sort();
        },
        getRoomDevices: function (roomName) {
            
            let newdata = [];
            
            for (let device of this.devices) {
                if(device['room'] == roomName){
                    newdata.push(device);
                }
            }
            this.roominfo = newdata;
            console.log(this.roominfo);
        }
    }
});

Data in a variable
5df250a9705f6518145373.png

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander, 2019-12-12
@Alex1237

Lord I'm down.. roominfo class and roominfo variable in vue...

D
Denis, 2019-12-13
@densis2003

Comrade code
then((json) => {
this.devices = json;
this.getRoomDevices("133");
})
It doesn't work, this is not in this context, try to access the global app. devices = json; and so far and everything will work out

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question