Vue.js

Question

我想对提供给 v-repeat 的对象应用过滤器以仅获取一些组件。

但是，在将其转换为 { $key: '...', $value: '...' } 的数组之前，我找不到应用它的方法。

这是我想做的事情：

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>

注意 ($data | getValues) 尝试在转换完成之前评估过滤器。

同时我用一个方法实现了它：

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>

但我想知道是否有任何方法可以先应用过滤器。

Answer 1

您的 getValues() 方法是一种常见且很好的方法。反应式表达式中的表达式和过滤器语法不一定能解决所有数据生成场景。

另一种方法是对模型使用 watch 来计算您想要的值，并将其设置为模型上的另一个属性。然后根据该计算值写下您的v-repeat。

顺便说一句，在您的特定情况下，您应该能够这样做：

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

$data 只是模型本身，根据它评估对属性的引用。

Vue.js - 强制应用过滤器

Vue.js - Force a filter application