如何在 Vue 2 中呈现嵌套元素的过滤器？

Question

我在 Vue 中有以下内容 1.x

<tr v-for="product in products">
   <td><img src="{{ product.image_url | thumbnail }}" class="thumbnail"></td>
</tr>

但在 Vue 2 中我尝试过：

 <tr v-for="product in products">
   <td><img :src="product.image_url | thumbnail" class="thumbnail"></td>
 </tr>

and got "Property or method "thumbnail" 未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性"=12=]

注意：当我将它分配给 html 元素上的属性时，常规胡须插值过滤器不起作用（即：{{ data | filter }} 工作正常纯文本，但在尝试执行 src="{{ data | filter }}" 时不是。

我尝试了计算属性但它不起作用，因为我试图获取计算值的元素是数组中的每个元素（我正在遍历数组中的每个元素).

缩略图所做的只是做一些正则表达式和花哨的文本替换。不确定在 vue2 中执行此操作的最佳方法。

Answer 1

Vue.js 2.0

Filters can now only be used inside text interpolations ({{}} tags). In the past we've found using filters with directives such as v-model, v-on etc. led to more complexity than convenience, and for list filtering on v-for it is more appropriate to move that logic into JavaScript as computed properties.

使用计算属性:

new Vue({
    el: '#app',
    data: {
        products: [],
    },

    computed: {
        filterProducts() {
            return this.products.filter(function(product) {
                ...
            })
        }
    }
})

Answer 2

Vue.js 希望您先定义过滤器，然后再在模板中使用它们。下面是一个如何定义日期格式化过滤器的示例：

// Define the date time format filter
Vue.filter("formatDate", function(date) {
    return moment(date).format("MMMM D, YYYY")
})

一旦你有了它，你就可以在代码中使用它，如下所示：

<div class="due-date">{{dueDate | formatDate}}</div>

你能告诉我 thumbnail 过滤器应该做什么吗？对于图像，我认为您无法在客户端进行任何处理。您可以显示一些预定义大小的缩略图，这是您在 CSS 中会做的事情，而不是使用过滤器。

如何在 Vue 2 中呈现嵌套元素的过滤器？

How to render filter of a nested element in Vue 2?

vue.js

vuejs2