vuejs / discussion Goto Github PK

I've been following the router example for 0.10 and had a question. During the created hook of the component (that gets instantiated via v-view), I setup some even listeners. When I switch views will those event listeners be cleaned up for me or do I have to do any additional steps?

I’m trying to build my ViewModel as a data-only objects. The data property is the central part, and the methods are manipulating it. Everything impacted by these changes should be in templates and directives.

In other words, I don’t want any reference to the DOM in my ViewModel, and I think we all agree this is the right way to build solid and testable apps with Vue.

But there is some cases where this separation can be a bit complicated.

input focus

In this example, I want to trigger a focus on an input element. Since everything is state-based, I can’t just use .focus() on a directive: I have to change a flag somewhere, and instances of my directives will listen to this flag, which seem fine.

Since a blur event can occur outside of the ViewModel, and I want to reflect this in my ViewModel, I have to share some data with my directive. In order to do this, I have to use an object, so it will be passed by reference: focus: { focused: true }.

Example: http://jsfiddle.net/pQjT9/

Two things does not seem right however:

First, I wonder if it would be possible to use a focused property directly on the data object? Maybe it’s better to keep it separate, as it will be updated from the outside.

Second, I don’t really care about the value of the focus.focused property (plus it can be wrong sometimes, e.g. when .focus() occurs while the document is not focused). I could set focus.focused to true every time I want to trigger the .focus() (the update function is called anyway), but it does look like a hack. Since there is no directive methods, what would be the best way to notify a directive?

The cleanest solution I can think of would be to trigger an event from the VM, and listen to it from the directive, with this.vm.$on. Is there a better way to do it?

非常好用的工具，有这个就可以很方便的做适配 mobile 的单页应用了

When using computed properties with directives (specifically v-show and v-class, although I imagine it might be the case with others) it seems like the properties are not observed and subsequent changes to those properties are not reflected to the directives.

Example: http://jsfiddle.net/G7TeJ/

You can see that the the visible value is being updated in both components, but the class is not changed in the second one.

It bothered me a long time on scaling my small apps into larger ones. For most the time, I'm writing apps in Backbone and other frameworks(now it's Vue). I found it could be quite confusing to build a large app based on JavaScript. Not until these weeks did I realize that models are always the center of apps. More importantly, the way how our single page apps work, is not that different form the way it does on a web server. After watching the talk of Fackbook on Flux, I think the way Vue is using is not good enough, here are my options:

the way an app works

Two-way binding makes it much easier to build apps. However syncing from the View back to Model is not as useful. Without those syncing strategy, capturing an event and setting data to model is often as simple as an assignment.

While the solution of rendering DOM is different, I think that doesn't make a lot difference on the whole.

The lifecycle of an app as I understand is like:

• save data as models(JSON Object, or Backbone.Model..)
• render Views(with template engine or data binding)
• capture events on View, togather with the data(like Ractive event.context does)
• update model with these data
• Views listen to those events and update

and how about Vue

I consider two points in the lifecycle as important:

• in most views, they can access data directly and listen to that
• views can be splitted into smaller ones, so do the listeners and handlers

These rules are very like how pages are rendered in a web server. Each page can access whatever data they need in database. And, for each page, we specify a controller with a bunch of functions or methods that deal with the request. In such a way, different pages are seperated from each other and developing each ones are small tasks to finish.

But in Vue I don't see it. If I choose component to scale my app, I can get all components sharing the data, but putting methods(listeners) into small components are quite hard because we don't define methods in defining components. Then if I choose to use multiple Vue instances, sharing data would be inconvenient. I don't get a good choice.

As a conclusion, I think Vue is sweet for small apps, while for larger ones Vue may lead to confusions.

In [vue-github] I have a Fetchable base Vue.extend-ed class that sets up a $watch on an apiUrl data attribute.

The "rendering" components such as github-repo-list inherit from Fetchable.

However, I hit a snag this morning when trying to add a third layer. I was working to build two variations of github-repo-list: one as a dropdown, and one as a vertical menu. I set out to follow the same pattern, with code like this:

var GithubRepoList = Vue.component('github-repo-list', Fetchable.extend({.....});

Vue.component('github-repo-list-dropdown', GithubRepoList.extend({
  template: '#template-github-repo-list-dropdown',
  replace: true
}));

I've hacked together something similar in this fiddle. Clicking "first" generates an alert. Clicking "second" does not.

I'm going to change course and just share the fetchData function directly via ye olde JavaScript.

It's likely others may attempt this method of component extension and be confused (as I was).

Thanks!

Hey, first of all, sorry if this is not the right place to ask for help. I've tried the IRC channel a few times but apparently I'm the only active user on the list 😢

The thing is, I'm using Vue to build an app and I'm striving with some things... Mostly because I'm still not familiar with the framework yet but I really liked it and I want to use it big time.

1. What is the best approach to use when making components "talk" to each other? I'm using this.$root.$broadcast inside a custom method but I'm not sure if this is the best way to accomplish such thing

2. Is there any way that components can extend other component's template? Not sure if this makes sense, here's what I'm trying to achieve:

// Base section component
Vue.component('section', {
  template: '<h1>{{name}}</h1><content />'
});

// Home section component
Vue.component('home-section', {
  template: 'section',
  // or something like:
  // extendsTemplate: 'section'
  data: {
    name: 'Home section'
  }
})

Since I'm using Vue inside an AMD structure, I could do the template loading/processing before setting the template of my home-section component, but I want to know if there's a way to do it through Vue itself.

I know I could do something like:

<div v-component="section" id="home-section"></div>
<div v-component="section" id="another-section"></div>

And create a new Vue instance for each section (right?) but it doesn't seem to be a great solution since each section template will differ a bit.

3. Let's say I have a main component that handle all my app "sections" (as you exemplify here). Then I want to create the component contact-section, which has a <form>(as you exemplify here) and therefore should be a new Vue instance itself.
   How is the best way to put this all together? Can I declare a new Vue instance inside my component? Does that even make sense?

What I have now looks actually exactly to what you have on the example, where you have a main <div> wrapper for the app, a Vue instance for the app and you just change which view/component should be displayed (app.currentView = 'my-section-component-id').
I want to have a more flexible/solid structure to handle the sections using the same Vue instance but I'm having a hard time...

Some of the questions are kinda odd I know... I appreciate any help.

Cheers!

Just to share. As far as an application in hands is heavy asynchronous, I have found these methods declared in definition object to be very handy:

    methods: {
        tick: function(cb) {
            Vue.nextTick(cb);
        },
        promise: function(cb) {
            var self = this;
            cb = cb || function() {
                return 'Vue tick is done';
            };
            return promise.create(function(resolve) {
                var newCb = function() {
                    var result = cb.call(self);
                    resolve(result);
                };
                self.tick(newCb);
            });
        },
        ...

Can you do better?

P.S. Many promises implementations can be used, of course. I use vou: you see, similar to vue :)

Being at the moment a Knockout user, I use this [1] excellent wrapper around jQuery UI autocompletion plugin. What is the Vue.js way?

[1] https://github.com/rniemeyer/knockout-jqAutocomplete

I was excited about writing apps in Vue, but felt quite upset when I ran into some problems. And I don't if those are bugs, since there's quite a lot running underneath and I don't know how Vue is running in detail.

For example, I was using a variable named xName, and there was an xScope that was computed from xName, also there was a node I wrote div :v-with=xScope. And in xScope, there was a xList which I also wrote div v-repeat=xList. After that, surprisingly, items of xList were not actually rendered.

Anothere example, I have a map like:

'03-04':
  name: 'a'
  list: [1,2,3]
'03-05':
  name: 'b'
  list: [1,2,3,4]
'03-06':
  name: 'c'
  list: [1,2,3]

I use a variable named view to control if it's shown:

div v-if="view='03-04'"
 p
div v-if="view='03-05'"
 p
div v-if="view='03-06'"
 p

But found it didn't work, until I changed it to v-show..

I think it's quite boring to take the problem out of my code antd put it on jsFiddle. It could be a bug of Vue, or probably a misunderstanding, or maybe a typo. But is there and means that I can use to debug my code and find where the actual problem lays?

Sorry for all these questions, I just feel like if I can't find something maybe the answers till be of use to somebody.

Is there anyway to get the component name from a vm via javascript?

Say, I have a (layout) template with some element used as "slot" for "modules inserting". As a result, I can not use el in Vue constructor as far as $destroy() removes the slot from the DOM. So I'm forced to omit el in constructor and to use, say. $appendTo(mySlot). This way Vue wraps supplied template with div. I'd want to avoid superfluous div insertion. How to?

P.S. To my taste at such use case it is more expected from Vue to insert literally that node list is supplied by template into $appendTo argument element.

Hello Evan,

I read the Vue.js guide and really like the ideas behind the framework and the combination made inspired by other existing frameworks.

I do not have dev experience with it so far but really want to give it a try in a project. So I am curious about data binding and dirty checking internals and the implications they would have on mobile apps with huge amount of data.

In this talk http://www.confreaks.com/videos/3221-mwjs-be-predictable-not-correct Pete Hunt is saying something like this:

Mobile memory is even more important than mobile CPU

Some frameworks (such that use key value observers for data binding or special mechanisms for dirty checking based on directives) perform well when the application works with small amount of data. On the other hand they decrease their performance and use a lot of memory when the application data is more. In the presentation he uses the terms size of the view vs. size of the model

There are more interesting things in the talk as well...

Anyway I have seen that you care about performance and you have performance benchmark as well. It would be nice if you mention briefly about your approach to achieve the two way data binding as well as what is your feeling about the performance of Vue.js on mobile apps with a lot of data.

Thank you for taking the time to answer me!

For best practices in the context of v-show and v-if, should I:

1. delete obj.prop (likely not advisable?)
2. obj.prop = undefined
3. obj.prop = null

If I understand correctly, the binding itself takes place at the moment Vue instance is created. OTOH, it can be handy to have an opportunity to fill instance options in different places of a code (different functions) - chunk my chunk:

vm.$data.nextField = ...
vm.methods.anotherMethod = function() {...}

... - including all other possible instantiation options.

Is it possible to add an opportunity to bind explicitly?

Why not just pass instantiation options { data: .., methods: ... } ?

• the "filling chain" can start from Vue subclass, and it is unhandy to pass additional information (which constructor to use in the chain end). Passing just Vue (or subclass) instance would be the most handy way, I guess.
• the same controller (with any meaning of the term) can contain both a code preparing an (already partly prepared in controller's constructor) vm and a code working with the vm after it was bound. Say, in project in hands sometimes a chain of promise's thans contains binding (KO is in use at hte moment) somewhere in the middle.

What do you think?

I have an array of items that can be displayed in a list using a v-repeat but also on their own out of the v-repeat.

In the list I need to display two properties derivated from an item's property, I'm using a $watch and not two computed because some work to get the derivated expressions is the same:

var _ = require('lodash'),
    marked = require('marked');

module.exports = {
  created: function(){
    this.$watch('note.content', function(value){
      var pieces = value.split('\n'),
          el = document.createElement('div');

      el.innerHTML = marked(pieces[0]);
      this.note.title = el.textContent;

      pieces.shift(); // First one is title

      var excerpt =_.find(pieces, function(piece){
        return (piece !== undefined && piece !== null && piece !== '');
      });

      el.innerHTML = marked(excerpt || '');

      this.note.excerpt = el.textContent;
    });
  }
};

and displaying the list with the component above:

<li v-repeat='note: notes | filterBy status.query', v-component='writing-notes-list-item'>

The items are added to the array with only the content property:
notes.push({content: ''})

And works fine with the notes added to the array when it's created but if I add a new note to the array and edit it from outside the list (without the component), the watcher is called but the title and excerpt are not binded in the dom, to solve this I'm creating new notes with notes.push({content: '', title: '', excerpt: ''}) and it works correctly. But I don't like it because the two properties should are necessary only for interface purpose in the list but are not used outside of it.

Is this the expected behavior?

Also, not entirely related but I'm wondering if it's possible to create an array of Vue.extend instances and displaying it correctly using a v-repeat.

If this is a really edge case I understand so feel free to close the issue. Thanks!

I'm just wondering about the use of the wrapped 'timeout' function provided within an effect leave or enter function. What is it made for ?

I was thinking about it the other day. It would be cool if you had the ability to duplicate an element based on a number instead of an array/object.

Let's say I'm making snowflakes came from the sky. Assuming a snowflake is an element (image, SVG, whatever), you could do something like:

<!-- Adding 50 snowflakes -->
<img class="snowflake" id="snowflake-{{$index}}" v-repeat="50">

And then do whatever you want to them.

If you think this would be a great addition I could make a PR.

I'm using vue and pjax in the same page.
The html is replaced when navigated with pjax history back, but the VM doesn't work with the new DOM with same html, even after new it again.

Is there any way to rebuild the VM with all the old options and the new DOM?
Or is there any workaround?

So I have this simple stepper component that increases/decreases a numeric value which is set by a input field. Check the demo, please.

As you can see I have a model with the id, title and the value of the component and when I call add() or remove() methods I just manipulate the value and the view reacts to the change as expected. The problem is, when you change the value by selecting the text and typing a new value, the binding is gone for some reason. Check the video I made to make it clear.
I tried to watch for the keyup/down and force the update (this.value = parseInt(this.input.val(), 10);) but it didn't worked either.

Any ideas on how to fix this?

Subject says it all. I've been having some great modularity by creating a Base Vue class and then extending off that Base class.

Cheers

I know about the JSON.stringify tip to get a cleaner output of any vm property, but I find it cumbersome to type it everytime. Moreover, the output is not really clean and doesn't exploit the devTool object formatting abilities.

I ended up writing a litle utility function, vlog (it isn't used to blog video, sorry):

function vlog() {
    console.log(JSON.parse(JSON.stringify(arguments));
}

(I'm pretty sure someone already came out with this)

It outputs a clean, "what you would expect" object into the console. I think it would be nice to have under a global namespace, i.e. Vue.log() for instance. What do you think ?

I think would be nice to have an option to typecast model values tied to form elements. Today they're all strings or booleans but I think we should have an option to typecast to numbers as well.
It's a small addition but very convenient IMO.

Is there anyway via code to access the filtered array with filterBy?

The case is here:
http://jsfiddle.net/KP4Fm/

BTW, why the type of the password field is not String but Object?

I'm wondering how Vue.js might work in a browser extension style world where I don't control any of the markup, but would instead be injecting Vue.js compontents/code into the page.

Thoughts?

Hi, I'm fairly new to Vue.js.

I'd like to create a nested list:

<ul id="menu">
    <li>Favourite Songs
        <ul>
            <li>2014</li>
            <li>2013</li>
        </ul>
    </li>
    <li>Favourite Genres
        <ul>
            <li>Pop</li>
            <li>Rock</li>
            <li>Hip Hop</li>
        </ul>
    </li>
</ul>

from this model:

var playlists =  {
    "Favourite Songs": {
        "2014": [],
        "2013": []
    },
    "Favourite Genres": {
        "Pop": [],
        "Rock": [],
        "Hip Hop": []
    }
}

I tried:

<ul id="menu">
    <li v-repeat="playlist: playlists">{{playlist.$key}}
        <ul>
            <li v-repeat="subcategory: {{playlist.$value}}">
                {{subcategory.$key}}
            </li>
        </ul>
    </li>
</ul>

with

new Vue({
    el: '#menu',
    data: {
        "playlists": playlists
    }
})

but it did not work. Is it actually possible or is there another way to achieve this?

Here is my playground: http://jsfiddle.net/8WqxC/

Thank you for your help!

So, I have a simple list of checkboxes and I want to associate every item to a model but I'm afraid that's not possible. Check it out.
As far as I can see, the only way to do that is to add the models manually but it would be nice if I could do this dynamically. Something like:

<input type="checkbox" name="{{value}}" v-with="serialize" v-model="{{value}}">

The workaround that I'm using today is to iterate through all the checkbox instances on submit and check if they're checked or not... That's not ideal because the data is not persisted anymore.

Any ideas?

I have a server-side rendered list with lots of lis.
I want to attach 1 delegated event on the ul. I know about the v-on directive but

<li v-on="click:bla">1</li>
<li v-on="click:bla">2</li>
<li v-on="click:bla">3</li>
<li v-on="click:bla">4</li>
<li v-on="click:bla">5</li>
<li v-on="click:bla">6</li>

looks a bit verbose to me and attaches 6 delegated events to my $el as far i understand.
Any ideas how to solve this in a cleaner way?
I'm looking for something like jQuery's

$(el).on('click', 'li', bla);

Maybe

<ul v-on="click li:bla">
...
</ul>

Is something like that already possible?
Thank you in advance for your help :)

So I'm not sure if I'm missing something here or what but I think that we could have a better control over component context in Vue.

Take a look at this example. As you can see, I have a component called list and I have two instances of it on my app. I associate the components using v-component and set their model using v-repeat.

The way it is today works but I think it's overcomplicated for something that should be trivial. All I want to do is to invoke the remove() method of specific list instances.
For that I rely on the messaging system to do the job.

I've tried to use v-ref but for some reason it doesn't work:

<!-- If I try to associate a reference to the element -->
<div v-ref="countries" v-component="list" v-repeat="countries"></div>

// and then try to access it
new Vue({
  // ...
  ready: function() {
    console.log(this.$.countries); // Object {}
    // it doesn't work
  }
  // ...
});

The best way to do it IMO would be something like:

Vue.component('list', {
  // ...
  ready: {
    this.elements = $(this.$el);
  },

  methods: {
    remove: function() {
      // will fade out only the elements of this context
      this.elements.fadeOut();
    }
  }
  // ...
});

new Vue({
// ...
methods: {
  removeCountries: {
    this.$.countries.remove();
  }
});
/// ...

What do you think?

Hi!

Two thoughts:

• to my taste current <select> support looks slightly alien in model.js.
• current <select> can be not very handy at some cases. Say, it is very handy to have an opportunity to select (via string labels) any kind of objects (rather strings only). Another handy feature is a "live" options list.

So, I would remove <select> support form the model.js and add dedicated full-fledged directive in separated file.

As far as listed points reflect my use cases, I have tried to invent own v-select, and today's result is presented below. It's intended to work with markup without <option> elements at all. Just <select v-select='target.object.key'></select>. I definitely know Vue's author likes clean markup :)

'use strict';
var dx = require('./dx');
// dir.vm.$get(dir.key) on init must provide:
//   options - key in the model to the array of pairs { label, value } 
//   label - label key in pair, defaults to 'label'
//   value - value key in pair, defaults to 'value'
// Or, if it is a string rather an object, it's just pairs key with default
// names for label and value.
// After init dir.key path is used to store selected object ;)

var sel = Object.create(null);

sel._fillIn = function(pairs) {
    var self = this;
    self.el.options.length = 0;
    for (var i = 0; i < pairs.length; i++) {
        var pair = pairs[i];
        var op = new Option(pair[self.cfg.label]);
        self.el.options.add(op);
    }
};

sel._idxOfValue = function(pairs, value) {
    for (var i = 0; i < pairs.length; i++)
        if (value === pairs[i][this.cfg.value])
            return i;
    return -1;
};

sel.bind = function() {
    var self = this;

    // get configuration ----------------------------
    var cfg = self.vm.$get(self.key);
    self.vm.$set(self.key, undefined); // if pairs array is empty
    self.cfg = Object.create(null);
    if (typeof cfg === 'string') {
        self.cfg.options = cfg;
        self.cfg.label = 'label';
        self.cfg.value = 'value';
    }
    else {
        self.cfg.options = cfg.options;
        self.cfg.label = cfg.label || 'label';
        self.cfg.value = cfg.value || 'value';
    }

    // initial filling in ----------------------------
    var pairs = self.vm.$get(self.cfg.options) || []; // can be not set on initial render
    self._fillIn(pairs);
    if (self.el.options.length > 0)
        self.el.options.selectedIndex = 0;

    // listen to selection ----------------------------
    self.selectCallback = function() {
        if (self.el.options.selectedIndex >= 0) {
            var value = self.vm.$get(self.cfg.options)[self.el.options.selectedIndex][self.cfg.value];
            var current = self.vm.$get(self.key);
            if (current !== value)
                self.vm.$set(self.key, value);
        }
        else
            self.vm.$set(self.key, undefined);
    };
    dx.listen(self.el, 'change', self.selectCallback);

    // listen to pairs change --------------------------
    self.pairsCallback = function(newPairs) {
        var current = self.vm.$get(self.key);
        self._fillIn(newPairs);
        // try to set index in accordance with current value
        if (current || current === 0) {
            var newIdx = self._idxOfValue(newPairs, current);
            if (newIdx >= 0) {
                self.el.options.selectedIndex = newIdx;
                return;
            }
        }
        // new pairs haven't current value - defaulting to the first
        if (self.el.options.length > 0)
            self.el.options.selectedIndex = 0;
        dx.trigger(self.el, 'change');
    };
    self.vm.$watch(self.cfg.options, self.pairsCallback);

};

sel.update = function(newVal) { // expected be found in pairs
    var self = this;
    var pairs = self.vm.$get(self.cfg.options) || [];
    var newIdx = self._idxOfValue(pairs, newVal);
    if (newIdx < 0 && self.el.options.length > 0)
        newIdx = 0;
    self.el.options.selectedIndex = newIdx;
    dx.trigger(self.el, 'change');
};

sel.unbind = function() {
    var self = this;
    dx.deaf(self.el, 'change', self.selectCallback);
    self.vm.$unwatch(self.cfg.options, self.pairsCallback);
};

module.exports = sel;

Thoughts? Criticism?

P.S. Later edit includes more or less final version of directive definition object. dx... methods here are just anything you have in hand to attach (and detach) event listener to an element and to trigger an event.

It looks like the dom is ready in the attached state, and created can be used to manipulate $data before it goes into the compilation phase, but what is ready used for?

Just trying to get a clear picture in my head for these lifecycle events. I've read the docs but maybe a quick "When should you use these lifecycle events".

Thoughts?

I'm trying to create a directive to stretch the dom element to max height of the screen and create a resize handler for layouts but it doesn't look like the dom elements are all setup properly when it fires.

The documentation of v-with in the Composing Components kind of implies (well I thought it did) that v-with is the only way to pass arguments to components.

However, if omitted, the component does automatically seem to inherit the caller's data as its main data, which may be just fine in some cases.

Also noted that v-with can take multiple named arguments, eg:

But you cannot pass multiple unnamed arguments, eg - this doesn't work:

And finally, it's a terrible (terrible, terrible idea) to pass an argument with the same name as the parent, eg:

This seems to do weird thing to the getters/setters. If you $watch donkeyMsg, the handler will fire twice.

Can a contract be added to event handlers' return value? - if a handler returns false, e.stopPropagation() and e.preventDefault() are automatically called?

I'm finding that many of my components in vue-github only vary around the template.

Since I'm leaning on markup for instantiation of everything but a "root" Vue.js app, it'd be slick to be able to do something like:

<div v-component="github-milestone-list" v-template="#accordion"></div>

The value of v-template should either be a DOM ID or (very) basic template string--DOM ID would obviously be preferred to avoid having to escape the whole template.

Thanks!

There is know famous Firefox bug: on auto-filling form's field the browser doesn't fire any events to the field listeners. For us it means a model doesn't update. To address this FF bug I have tried to use this directive intended to be used with form element:

Vue.directive('submit', {
    bind: function() {
        var self = this;
        self.submitCallback = function(event) {
            if (event.originalEvent)
                event = event.originalEvent;
            var elements = self.el.elements;
            if (elements && elements.length)
                for (var i = 0; i < elements.length; i++) {
                    $(elements[i]).trigger('change');
                    $(elements[i]).trigger('input');
                }
            var handler = self.vm[self.key];
            var handlerReturnValue = handler.call(self);
            if (handlerReturnValue !== true) {
                if (event.stopPropagation)
                    event.stopPropagation();
                if (event.preventDefault)
                    event.preventDefault();
                else
                    event.returnValue = false;
            }
            return handlerReturnValue === true;
        }
        $(self.el).bind('submit', self.submitCallback);
    },
    unbind: function() {
        var self = this;
        $(self.el).unbind('submit', self.submitCallback);
    }
});

Something similar I have used with Knockout.
Nevertheless, I definitely have missed some Vue specifics - a model still doesn't update.
Thoughts?

So I have a main section wrapper and I want to render/show a single section at time. Here's what I'm trying to do (click anywhere to see it).
As you can see it works but it's always creating a new section node as I change the current view, stacking lots of section tags on top of each other.
Is there a way to replace the section node instead of creating a new one?

Any reason this is not working? The item list component should be updating when the selected binding is changed.

http://jsfiddle.net/brandonpierce/BLcTC/

Hi!

I was spending some time with the documentation (which is gorgeous and really well-organized, by the way, bravo!) I came across the "Dependency collection gotcha" section of the page on computed properties.

This was a surprise to me since it seems really janky/difficult to remember, and because Knockout.js (which is the similar library I'm coming from) has solved the same problem for a while by recomputing the dependencies for a getter on a computed property each time that getter is executed. I think it can actually end up being more efficient since, if one observed property allows you to skip an entire section of code with other properties that might be observed, you know that you don't have to re-eval the getter until the property in the conditional changes. When you re-eval it again, and the conditional is taken, you'll detect all the new dependencies and add them to the set of subscriptions.

My guess is that maybe there's something different in the way that Vue.js is implemented where it's not possible to change from an initial set of dependencies once a computed property is set up. I just wanted to know more about that, or if it's a rough edge that just hasn't been gotten to yet.

Thanks for the great documentation and guides! It's making it very easy to learn.

I'm likely Doing It Wrong, but I have several instances where I need changes to have happened to multiple variables prior to triggering a method. Currently, I check for the proper values (or any value) of the variables inside the triggered method, but that means my code still looks like:

this.$watch('user', function() {
  this.fetchData()
})
this.$watch('project', function() {
  this.fetchData()
});

What I'd hoped to do was:

this.$watch(['user', 'project'], function() {
  this.fetchData();
});

Perhaps I'm just being lazy, but that looks prettier anyway. 😀

To force model field be float or integer number (it simplifies further interaction with server side) I'm trying:

var addInputDirective = function(name, _set) {
    Vue.directive(name, {
        _set: _set,
        bind: Vue.options.directives.model.bind,
        update: Vue.options.directives.model.update,
        unbind: Vue.options.directives.model.unbind
    });
};

addInputDirective('float', function() {
    var result = this.el[this.attr];
    var parsed = parseFloat(('' + result).replace(',', '.'), 10);
    result = isNaN(parsed) ? result : parsed;
    this.ownerVM.$set(this.key, result);
});

addInputDirective('integer', function() {
    var result = this.el[this.attr];
    var parsed = parseInt(('' + result), 10);
    result = isNaN(parsed) ? result : parsed;
    this.ownerVM.$set(this.key, result);
});

It seems to work expected way, but while bind, update and unbind are parts of official API, _set isn't one. Is there "more official" way to extend v-model?

Would it be possible to create a v-repeat component?

tl;dr Being able to v-repeat a group of tags without a parent would be fabulous.

I'm using Semantic UI with Vue.js, and running into code like this:

<div class="ui accordion">
  <div class="title">{{title}}</div>
  <div class="content">{{content}}</div>
</div>

I don't want .ui.accordion to repeat, just .title and .content without a wrapping <div>.

I do it now with a wrapping div, but that throws of the Semantic UI CSS:
https://bigbluehat.github.io/vue-github/roadmap.html (.title border issues...mostly).

Thanks!

I'm having a hard time figuring out a good pattern for passing data for a dynamic component being rendered via v-view.

I can setup event listeners in the created component in the created callback, but then I have to do a setTimeout to wait around for it to pick up the event.

Hopefully this question makes sense, I'll try to create a fiddle soon.

I use data attributes sometimes and it would be really helpful to have a directive that parse them and compute to $data. v-data, maybe?

<main id="app" data-foo="bar">My Application</main>

new Vue({
  el: '#app',
  ready: function() {
    console.log('Vue is awesome »', this.foo); // bar
  }
});

What do you guys think?

/ping @yyx990803

I create a navigation menu with vuejs for http://cirru.org/ and I got a problem.
I want it open a specified readme after page load.
The way it loads is a function I defined in methods property.
According to the docs, methods are not called from outside the scope.
How I am supposed to call the method with vuejs?

By the way, is that a good idea to create "vuejs" tag at StackOverflow and post questions there?

I know this is a strange request.

var a = [[1,2,3],[4,5,6]]
a[0].batch = 1
a[1].batch = 2

Is there anyway to access the .batch field on an array? I tried $value.batch but that doesn't seem to work. Sometimes I want to store some data on an array instance when run through a filter.

I realize this is likely an edgecase. However, I'm trying to get a textarea that holds some JSON that when edited updates a ViewModel...but I'm not having much luck.

This is as close as I've gotten:
https://github.com/BigBlueHat/vue-schema/blob/schema-textarea/app.js#L25-L28

It works, but it could be much simpler, more pluggable, and less tied to a CSS class ("code smell").

Thanks for any ideas/input/help!

I tried to get file name using v-model directive, but it did not work.
http://jsfiddle.net/4PTjF/

I think, determination of listining event in directive's model.js needs more condition.

self.event =
    (self.compiler.options.lazy ||
    tag === 'SELECT' ||
    type === 'checkbox' || type === 'radio' || type === 'file')
        ? 'change'
        : 'input'

or is there a better way to get file name?

I've just released a Vue plugin for detecting when VM elements enter/leave the viewport. I'd love to hear what you think about the plugin's functionality, the structure of the project, the way it's released, how to test, etc.

https://github.com/holic/vue-viewport

Thanks!