Dynamically set v-for with vue.js

Question

So I'm using Vue.js in my project, and I've got a problem: how could I bind filter for v-for dynamically? At some moment of time I'm passing the id of element to the vue method, how could I then put it into v-for item in items | filterBy @{id} in 'id'?

I've tried just putting 'v-for' attribute by JQuery 'attr', but this does not seem to work. I suppose that Vue.filter or vm.$set should be used here, but I can't figure anything out yet.

Would appreciate any possible help!

For example:

var vm = new Vue({
  ...
  methods: {
    bindId: function(id) { //id is passed from html
      var repeat = 'item in items | filterBy "' + id + '" in "id"';
      $(#main).children('.collection').attr('v-for', repeat);
    }
  }
}

well for now I've just put each() function, comparing ids and making $(this).remove if they are not equal. This looks horrible, but at least works — Coffee
– Coffee, Commented Apr 18, 2016 at 8:41
Are you getting the id from the same html page or from an external html resource? your markup would be helpful — Yerko Palma
– Yerko Palma, Commented Apr 18, 2016 at 11:42
from the same html (but in html it gets loaded from database) — Coffee
– Coffee, Commented Apr 18, 2016 at 12:02

Jeff · Accepted Answer · 2016-04-18 12:20:16Z

2

You can just use a variable in your v-for attribute:

v-for item in items | filterBy id in 'id'

var vm = new Vue({
  ...
  data:function() {
    return {
      id:1
    }
  }
}

Then you could use v-model on an input like text or select, and set the id there:

<input v-model="id"> <!-- Filter to the id inputted here  -->

A few examples here: https://vuejs.org/api/#filterBy

answered Apr 18, 2016 at 12:20

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Coffee Over a year ago

is it possible to set data inside another vue method?

Jeff Over a year ago

yes, you can just do this.id = foo or use this.$set('id',foo)

Coffee Over a year ago

thanks, I shall try this, sounds like it should work

Collectives™ on Stack Overflow

Dynamically set v-for with vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related