tugasan tatasusunan vue tidak boleh dihitung

Dalam Vue, adalah perkara biasa untuk menggunakan tatasusunan untuk mengikat data. Walau bagaimanapun, kadangkala kita mungkin menghadapi masalah pelik: apabila kita menukar secara langsung nilai tatasusunan menggunakan penyataan tugasan, komponen tidak membuat semula.

Ini kerana sistem responsif Vue dilaksanakan berdasarkan penetap JavaScript. Apabila anda cuba mengubah suai data secara langsung dalam contoh Vue, Vue tidak menangkap operasi ini, dan ia tidak boleh mengemas kini paparan untuk mencerminkan perubahan ini, dengan kata lain, Vue tidak dapat menjamin sokongan untuk data tidak responsif.

Mari kita lihat contoh:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = ["Grape", "Orange", "Pineapple"];
    }
  }
};
</script>

Dalam komponen ini, kami mempunyai tatasusunan ringkas items yang digunakan untuk memaparkan senarai tidak tertib. Terdapat juga butang, dan apabila kami mengkliknya, kami terus menetapkan tatasusunan items kepada tatasusunan baharu.

Apabila kami menjalankan komponen ini, kami akan mendapati bahawa mengklik butang tidak mengemas kini senarai. Ini kerana kami menggunakan pernyataan tugasan untuk menukar tatasusunan items secara langsung. Dalam kes ini, Vue tidak dapat mengesan perubahan pada tatasusunan.

Jadi apa yang perlu kita lakukan?

Vue menyediakan beberapa kaedah untuk menyelesaikan masalah ini. Mari kita lihat sebahagian daripada mereka.

1. Vue.set

Vue.set ialah kaedah global Vue, digunakan untuk menambah sifat responsif pada objek responsif. Apabila berurusan dengan tatasusunan, Vue.set juga boleh digunakan untuk memasukkan elemen baharu pada kedudukan yang ditentukan.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      Vue.set(this.items, 1, "Orange");
    }
  }
};
</script>

Dalam contoh ini, kami menggantikan pernyataan tugasan tatasusunan dalam kaedah updateItems dengan kaedah Vue.set. Parameter pertama ialah tatasusunan yang akan diubah suai, parameter kedua ialah indeks yang akan diubah suai, dan parameter ketiga ialah elemen baharu yang akan dimasukkan.

Kini kami boleh mengubah suai tatasusunan dengan selamat dan paparan akan dikemas kini dengan sewajarnya.

2. Splice

Kaedah splice JavaScript boleh menambah atau mengalih keluar elemen pada kedudukan tertentu. Dalam Vue kita boleh menggunakan ini untuk mengemas kini tatasusunan dan mencetuskan paparan semula paparan.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items.splice(1, 1, "Orange");
    }
  }
};
</script>

Dalam contoh ini, kami menggantikan splice dengan Banana menggunakan kaedah Orange dan mengemas kini tatasusunan items di tempatnya. Ini akan mencetuskan pemaparan semula.

Sudah tentu, ini tidak bermakna kita harus menggunakan kaedah splice pada setiap masa, tetapi kita harus memilih mengikut keadaan khusus kita.

3. Penapis

Apabila kita perlu mengalih keluar elemen tertentu dalam tatasusunan, kita boleh menggunakan kaedah filter. Ia mengembalikan tatasusunan baharu yang mengandungi hanya elemen yang memenuhi syarat.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = this.items.filter(item => item !== "Banana");
    }
  }
};
</script>

Dalam contoh ini, kami menggunakan kaedah filter untuk mencipta tatasusunan baharu, mengekalkan hanya elemen yang tidak sama dengan Banana. Kemudian kami menetapkan tatasusunan asal kepada tatasusunan baharu ini, sekali gus mencetuskan kemas kini paparan.

Ringkasan

Dalam Vue, penetapan langsung tatasusunan tidak mencetuskan pemaparan semula pandangan Ini disebabkan oleh mekanisme pelaksanaan sistem responsif Vue. Untuk menyelesaikan masalah ini, Vue menyediakan banyak kaedah untuk menangani situasi yang berbeza, seperti Vue.set, splice dan filter, dsb. Memilih kaedah yang sesuai boleh memudahkan kami melengkapkan fungsi yang kami perlukan untuk beroperasi, dan juga menjadikan kod kami lebih mudah dibaca dan diselenggara.

Atas ialah kandungan terperinci tugasan tatasusunan vue tidak boleh dihitung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!