vue filter()が効かない問題の解決方法

PHPz
リリース: 2023-04-13 14:23:26
オリジナル
2384 人が閲覧しました

Vue では、フィルターを使用してデータをフォーマットおよび変換し、特定のニーズを満たすことができます。ただし、同じ値で Vue フィルターを使用しても有効にならないなど、問題が発生する場合があります。では、このとき何をすべきでしょうか?

Vue では、フィルターの使用は非常に柔軟で便利です。 Vue.filter() メソッドを通じてグローバル フィルターを作成し、任意のコンポーネントに適用できます。ただし、同じ値を使用するとフィルターが有効にならない場合があります。

たとえば、フィルターを使用して製品価格を通貨形式にフォーマットする場合、複数の製品価格が同じ場合、フィルターが正しく機能しない可能性があります。これは、コンピューターでは同じ値は等しいとみなされ、Vue は DOM をレンダリングするときに再描画とリフローの回数をできる限り減らそうとするため、結果として同じ値が 1 回だけ計算されることになります。

それでは、この問題をどうやって解決すればいいのでしょうか?実際、この問題を解決するには多くの方法があります。以下はそのうちの 1 つです:

  1. 修飾子の使用

Vue フィルターは、この問題を解決するための修飾子の使用をサポートしています。 。フィルターの後に修飾子を追加して、すべての値が確実に計算されるようにすることができます。修飾子の使用方法は次のとおりです。

Vue.filter('currency', function (value) {
  return '$' + parseFloat(value).toFixed(2);
}, { deep: true });
ログイン後にコピー

上の例では、{ deep: true } 修飾子を使用しました。この修飾子は、Vue にデータ オブジェクトを深くトラバースして、各値が確実に計算されるように指示します。こうすることで、同じ値が複数の場所に出現する場合でも、Vue はそれらを複数回計算し、フィルターが適切に機能することを保証します。

  1. 計算プロパティの使用

修飾子の使用に加えて、計算プロパティを使用してこの問題を解決することもできます。コンポーネント内で計算されたプロパティを定義して、各値にフィルターを適用できます。このアプローチにより、フィルターが有効にならないという問題が解決されるだけでなく、コードがより明確になり、保守が容易になります。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ formattedPrice(item.price) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, price: 10.00 },
        { id: 2, price: 10.00 },
        { id: 3, price: 10.00 },
      ],
    };
  },
  methods: {
    // 定义计算属性
    formattedPrice(price) {
      return '$' + parseFloat(price).toFixed(2);
    },
  },
};
</script>
ログイン後にコピー

上で述べたように、コンポーネント内で formattedPrice という名前の計算プロパティを定義し、各値にフィルターを適用します。このようにして、すべての値が計算され、フィルターが適切に機能することが保証されます。

概要

Vue では、フィルターの使用は非常に柔軟で便利です。ただし、同じ値を扱う場合、いくつかの問題が発生する可能性があります。修飾子または計算されたプロパティを使用すると、フィルターが有効にならないという問題が解決され、コードがよりクリーンになり、保守が容易になります。

以上がvue filter()が効かない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!