Unreliable data passing to component.

[alchen]

I have a few nested components in the following fashion: component (different lists) > component (the list) > component (list item), with a combination of v-component="{{ currentView }}" and v-repeat. I also passed down a few additional parameter using v-with (also tried paramAttributes) all the way from the top most layer to the bottom.

The problem is that sometimes I cannot access those parameters passed down from v-with. I have not isolated the source of the problem, and I will see if I can put them in jsfiddle's (or find out what I did wrong).

I have a method that uses a v-with variable username, and the following will both log undefined.

paramAttributes: ['username'],
methods: {
  doSomething: function () { console.log(this.username); console.log(this.$data.username); }
}

Unless I do either of theses:

1. Add the following created to the component:

   created: function () {
     this.username = this.$data.username;
     this.now = this.$data.now;
   }
   

   This results in this.username === username and this.$data.username === undefined.

2. Refresh. I don't really understand why it'd be different between a fresh load and a refresh, but the same problem doesn't appear in a refresh. Update: the refresh has nothing to do with the problem; the application was simply in a different state.

[azamat-sharapov]

Data passed using directives (v-with/paramAttributes) are available after compilation of DOM. Maybe you are calling doSomething() before compilation? try to call it on compiled or ready hooks.

[alchen]

I'm trying to do more or less this: pass down the username so the child components can distinguish some list items from the others in a v-repeat, and attach appropriate method with the username as argument.

So, I have both a few methods triggered with v-on and a computed property that relies on v-with. It will first give me a warning about undefined when displaying the list for that computed property. Then, the v-on triggered methods also gets undefined data. I'm not sure how they can be moved into a different stage.

[yyx990803]

Well, this still sounds very abstract and I don't see a way to triage the problem without seeing real code. Even if you can't reproduce the problem in a fiddle, showing what you are trying to do would still help.

[alchen]

@yyx990803 I think just found out what triggers my problem. JSFiddle: http://jsfiddle.net/bk0ngqfp/1/

After 2 seconds, foo becomes undefined after the update. In my original code, the refresh made the problem go away because it is in a different state that doesn't replace the list of items. i.e. refresh has nothing to do with it.

It only seems to be a problem if track-by is applied.

[yyx990803]

Thanks for the fiddle, this has been fixed in dev, but it won't ship until 0.12 is released. In the meanwhile, you can get around this issue by using an identifier with your v-repeat: instead of v-repeat="items", do v-repeat="item:items". http://jsfiddle.net/yyx990803/bk0ngqfp/2/

[alchen]

Got it. Thanks for the quick fix!