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 - 强制过滤器应用程序

1 个答案: