1

我在 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>

并得到“属性或方法“缩略图”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性“

注意：当我将常规的小胡子插值过滤器分配给 html 元素上的属性时（即：{{ data | filter }} 可以作为纯文本正常工作，但在尝试执行 src="{{数据|过滤器}}”。

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

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

4

2 回答 2

2

Vue.js 2.0

过滤器现在只能在文本插值（{{}} 标签）内使用。在过去，我们发现使用带有 v-model、v-on 等指令的过滤器会导致复杂性大于便利性，对于 v-for 上的列表过滤，将逻辑作为计算属性移动到 JavaScript 中更合适.

使用计算属性：

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

    computed: {
        filterProducts() {
            return this.products.filter(function(product) {
                ...
            })
        }
    }
})
于 2016-10-26T13:36:30.877 回答
0

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 中会做的事情，而不是使用过滤器。

于 2016-10-26T13:40:31.733 回答