meteor-vue icon indicating copy to clipboard operation
meteor-vue copied to clipboard

NOT reactive when using vm's data or props as params

Open zhongqf opened this issue 9 years ago • 7 comments

Look at this sample

var vm = new Vue({
        el: '#vue-demo',
        data: function() {
            listId: 1
        },
        sync: {
            items: function() {
                return Lists.find({listId: this.listId})
            }
        }
}

items is not updated even when listId changed.

zhongqf avatar Nov 05 '15 13:11 zhongqf

@zhongqf Think in sync object like the methods in "original" vuejs model, when data changes the methods wasn't executed too, right?

If you want to run some method when data['listId'] changes you'll need to use the $watch:

vm.$watch('listId', function(value){
...
});

nerijunior avatar Nov 05 '15 13:11 nerijunior

Running a computed property would be a better idea.

niallobrien avatar Nov 06 '15 01:11 niallobrien

Agreed. This is a good idea, so one of the data change flows can be

$data -> computed -> Tracker -> $sync to data

zhouzhuojie avatar Nov 09 '15 07:11 zhouzhuojie

Thanks. @zhouzhuojie could you give some code example? And, Is there any possibility that merge/connect Vue and Meteor's dependency system? so that we could make Vue as first-class template engine of Meteor just like Blaze.

zhongqf avatar Nov 14 '15 14:11 zhongqf

This could be possible with Browserify (at least I think Meteor uses Browserify). I have it working using Webpack outside of Meteor.

niallobrien avatar Nov 14 '15 19:11 niallobrien

@niallobrien sorry, I'm not meaning the package dependency. I meant to merge/connect the data dependency mechanism (Tracker, Dependency ... in Meteor and $watch ,observer ... in Vue) that make vue/meteor reactive.

zhongqf avatar Nov 15 '15 13:11 zhongqf

https://github.com/almini/vue-meteor this project might be a solution for @zhongqf .

beeplin avatar Mar 01 '16 15:03 beeplin