problem with nested v-repeat directives.

[twarogowski]

Hi,

When I nest 2 v-repeat directives, inner directive contents is recreated on every model update. Apart form performance penalty, this results in loosing HTML input focus.

Take a look:

http://jsfiddle.net/twarogowski/E8KH6/

[yyx990803]

Yes... this only happens when identifiers are used and I know what is causing the issue, will try to fix it when I have time.

[yyx990803]

Ok, in fact the issue is caused by using primitive values in the arrays. If you use objects instead of primitive values the bug doesn't occur. In general I'd have to find a better way to handle primitive arrays.

[twarogowski]

that is true, after wrapping primitive ints into object I can see improvement - no more recreating whole array of DOM elements.

However, only first update is captured, any further changes are not reflected in VM.

Please take a look on my modified fiddle:

http://jsfiddle.net/twarogowski/5W5Vz/

First keystroke is reflected in VM, any subsequent changes are ignored. Just try to modify any value in any text input. Only first character gets updated.

[lensgolda]

Have some code

<div v-repeat="hotel: hotels>
                <span v-show="hotel.starsCode" v-repeat="hotel.starsCode | int" ></span>

trying to use int filter on hotel.starsCode:

Vue.filter('int', function (val) {
    console.log(val);
    var n = parseInt(val, 10);
    isNaN(n) ? 0 : n;
})

console.log(val) outputs ["2"] ["5"] ... typeof object
so when i try parseInt this values, and get string value of hotel.starsCode = "not defined" - for example, it returns NaN, so i check this and return 0(zero)or int 1 to v-repeat, and get error

Uncaught TypeError: Cannot read property 'length' of undefined

Even if i return int 1, have the same problem.
why Vue.js haven't int filter or v-repeat can't get 0 value? How can i solve this? Can you help me please?
(sorry for my English)

[yyx990803]

@lensgolda you should be returning an Array in the filter.

[lensgolda]

oh, thanks!