Vue.js - Force a filter application -

i wanted apply filter on object given v-repeat components.

however, can't find way apply before conversion array of { $key: '...', $value: '...' }.

here do:

vue.filter('getvalues', function (data) {    return [data.mykey1];    });    var vm = new vue({    el: '#vue',    data: { mykey1: 'myval1', mykey2: 'myval2' }  });

<ul id="vue">    <li v-repeat="val: ($data | getvalues)">{{ val }}</li>  </ul>  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.js"></script>

notice ($data | getvalues) try evaluate filter before conversion done.

i've achieved method in meantime:

var vm = new vue({   // ...   methods: {     getvalues: function (data) {       return [data.mykey1];     }   } }); 

var vm = new vue({    el: '#vue',    data: { mykey1: 'myval1', mykey2: 'myval2' },    methods: {      getvalues: function (data) {        return [data.mykey1];      }    }  });

<ul id="vue">    <li v-repeat="val: getvalues($data)">{{ val }}</li>  </ul>  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.js"></script>

but i'd know if there way make filter apply first.

your getvalues() approach common , fine approach. expression , filter syntax in reactive expressions isn't supposed solve data generation scenarios.

another approach use watch against model calculate value want , set property on model. write v-repeat against calculated value.

btw, in particular case, should able this:

<ul id="vue">   <li v-repeat="val: [ mykey1 ]">{{ val }}</li> </ul> 

$data model references attributes evaluated against.