Vue-devtools: Value from Component's Data are not refreshed in live mode

[thibaud-be]

I have a data object inside a component. the data is returned by a function as suggested in the exemple here:
http://vuejs.org/guide/components.html#Component_Option_Caveats

Issue:
with vue devtools in live mode, that data value is not properly refreshed when the value changes.

Workaround:
disabling the live mode and hitting refresh after the vale has changed does work.

I started using vue a couple of days ago, I'm liking it alot so far. thanks a lot :)

[yyx990803]

Hmm, I'll need a bit more information as this is supposed to work. Make sure that:

1. You've updated to the latest version of vue-devtools (1.0.4)
2. There's no error in the console

If both 1 and 2 are true, then it's most likely the data itself is not properly reactive...

[thibaud-be]

1. Ready detected Vue 1.04
2. Console only has one [Vue warn] and a bunch of 404 but no real show stopper

here is what I have:

        Vue.component('actorcomp', {
            props: ['actor','subjectindex'],
            data: function() {
                return {actorData: {}};
            },
            created: function() {
                this.loadActorData(this.subjectindex);
            },
            methods: {
                loadActorData: function(index) {
                    //loading data here
                    }
                },
                actorDataLoaded: function(result) {
                    this.actorData = JSON.parse(result);
                }
            },
            watch: {
                subjectindex: function(newVal, oldVal) {
                    this.loadActorData(newVal);
                }
            },
            template: '<div class="group"><h3>{{actor.label}}</h3><div class="icon icon-{{actor.key}}"></div></div>'
        }); 

boths props are properly refreshed but not the data.
How can I make sure that the data is reactive ?
my appologies for the newb questions I'm not 100% familiar with vue.js yet

[belisarh]

Most probably the data is actually reactive, but its reactivity it's not being used to do anything on the DOM. In this situation, clicking on the data property in question in Vue devtools would actually "wake it up" and show it's actual value. From what I can see in the template, while you using the prop, you are not referring to data anywhere on the template, thus devtools, in live mode, happily ignores it. Clicking on it should give you its current value.

[posva]

related #393

[brandonpittman]

This bit me in the ass. Wasted 30 minutes thinking my code was wrong.

[YihooIsMe]

This bit me in the ass. Wasted 30 minutes thinking my code was wrong.

+1

[thedomeffm]

It took me 3 hours...
Bug is still there

[brandonpittman]

It took me 3 hours...
Bug is still there

After learning why it didn't update, I didn't consider it a bug, but it's still not what I expected to happen.

[Nanobrainiac]

If possible to implement, this might make a nice feature request.

[developius]

Yeah. When building components, I usually build the API and data structure first, before putting any elements together. It's really annoying when this bug happens because you often spend ages trying to work out why the data isn't updating (when viewing via dev tools). As a last resort, you throw the value into the DOM and voila. Extremely frustrating.

[hrsetyono]

This happened to me just now too. It's fixed when I properly add unique key to every component loop