Bagaimana untuk menyelesaikan masalah yang vue filter() tidak berkuat kuasa

Dalam Vue, kami boleh menggunakan penapis untuk memformat dan mengubah data kami supaya ia memenuhi keperluan khusus. Walau bagaimanapun, kadangkala kami mungkin menghadapi beberapa masalah, seperti menggunakan penapis Vue dengan nilai yang sama tetapi ia tidak berkesan. Jadi, apa yang perlu kita lakukan pada masa ini?

Dalam Vue, penggunaan penapis adalah sangat fleksibel dan mudah. Kita boleh mencipta penapis global melalui kaedah Vue.filter() dan menggunakannya pada mana-mana komponen. Walau bagaimanapun, dalam beberapa kes, penapis mungkin tidak berkuat kuasa apabila kami menggunakan nilai yang sama.

Sebagai contoh, apabila kami menggunakan penapis untuk memformat harga item ke dalam format mata wang, penapis mungkin tidak berfungsi dengan betul apabila berbilang item mempunyai harga yang sama. Ini kerana dalam komputer, nilai yang sama dianggap sama, dan Vue akan cuba mengurangkan bilangan lukisan semula dan pengaliran semula sebanyak mungkin semasa memaparkan DOM, menyebabkan nilai yang sama dikira sekali sahaja.

Jadi, bagaimana untuk menyelesaikan masalah ini? Sebenarnya, terdapat banyak cara untuk menyelesaikan masalah ini, berikut adalah salah satunya:

1. Gunakan pengubah

Penapis Vue menyokong penggunaan pengubah untuk menyelesaikan masalah ini. Kami boleh menambah pengubah suai selepas penapis untuk memastikan setiap nilai dikira. Cara untuk menggunakan pengubah suai adalah seperti berikut:

Vue.filter('currency', function (value) {
  return '$' + parseFloat(value).toFixed(2);
}, { deep: true });

Dalam contoh di atas, kami menggunakan pengubah { deep: true }. Pengubah suai ini memberitahu Vue untuk merentasi objek data secara mendalam, memastikan setiap nilai dikira. Dengan cara ini, walaupun nilai yang sama muncul di berbilang tempat, Vue akan mengiranya beberapa kali, memastikan penapis berfungsi dengan betul.

2. Menggunakan Sifat Terkira

Selain menggunakan pengubah suai, kita juga boleh menggunakan sifat terkira untuk menyelesaikan masalah ini. Kita boleh menentukan sifat yang dikira dalam komponen untuk menggunakan penapis pada setiap nilai. Pendekatan ini bukan sahaja menyelesaikan masalah penapis tidak berkuat kuasa, tetapi juga menjadikan kod kami lebih jelas dan lebih mudah untuk diselenggara.

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

Seperti yang dinyatakan di atas, kami mentakrifkan sifat yang dikira bernama formattedPrice dalam komponen dan menggunakan penapis pada setiap nilai. Dengan cara ini kami memastikan bahawa setiap nilai dikira dan penapis berfungsi dengan betul.

Ringkasan

Dalam Vue, penggunaan penapis adalah sangat fleksibel dan mudah. Walau bagaimanapun, kami mungkin menghadapi beberapa masalah apabila berurusan dengan nilai yang sama. Dengan menggunakan pengubah suai atau sifat yang dikira, kami boleh menyelesaikan masalah penapis tidak berkuat kuasa, menjadikan kod kami lebih bersih dan lebih mudah diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah yang vue filter() tidak berkuat kuasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!