Vue.js - 强制过滤器应用程序

Posted 2023-02-22

【中文标题】Vue.js - 强制过滤器应用程序

【英文标题】：Vue.js - Force a filter application

【发布时间】：2015-10-02 12:00:57

【问题描述】：

我想对给定给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>

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

【参考方案1】：

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

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

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

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

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