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 に答える