Bagaimana untuk menyelesaikan masalah yang vue tahap tiga data tidak boleh diperolehi

Vue ialah rangka kerja JavaScript yang sangat popular untuk membina antara muka pengguna. Dalam pembangunan Vue, pemerolehan data peringkat ketiga adalah masalah biasa. Jika anda menghadapi masalah tidak dapat mendapatkan data peringkat ketiga Vue, jangan risau, saya akan memberikan anda beberapa penyelesaian di bawah.

1. Menggunakan komponen rekursif

Komponen rekursif bermaksud komponen itu memanggil dirinya sendiri dalam templatnya sendiri. Dengan menggunakan komponen rekursif, anda boleh mengendalikan data berstruktur pokok dengan mudah.

Berikut ialah contoh mudah komponen rekursif:

<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{ item.label }}
      <tree-view v-if="item.children" :data="item.children"></tree-view>
    </li>
  </ul>
</template>

<script>
export default {
  name: "TreeView",
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
};
</script>

Dalam contoh, komponen TreeView memanggil dirinya sendiri menggunakan templatnya sendiri. Jika item.children dalam data bukan null, buat komponen TreeView baharu untuk mengendalikan data anak. Kaedah ini boleh mengendalikan tahap data tanpa had dengan mudah.

2. Menggunakan atribut yang dikira

Atribut yang dikira ialah ciri yang sangat berguna dalam Vue. Gunakan atribut yang dikira untuk mencipta data terbitan berdasarkan data sedia ada. Apabila menangani masalah pemerolehan data peringkat ketiga, kita boleh menggunakan atribut yang dikira untuk mengendalikan terbitan data.

Berikut ialah contoh mudah:

<template>
  <div>
    <ul>
      <li v-for="item in firstLevelData" :key="item.id">
        {{ item.label }}
        <ul>
          <li v-for="secondItem in item.children" :key="secondItem.id">
            {{ secondItem.label }}
            <ul>
              <li v-for="thirdItem in secondItem.children" :key="thirdItem.id">
                {{ thirdItem.label }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Tree",
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  computed: {
    firstLevelData: function () {
      return this.data.filter((item) => item.level === 1);
    },
  },
};
</script>

Dalam contoh, kami menggunakan atribut yang dikira firstLevelData untuk menapis data peringkat pertama. Ini memudahkan untuk memproses data tertiari dan menjadikannya dalam templat.

3. Menggunakan Vuex

Vuex ialah alat pengurusan keadaan dalam Vue. Dengan menggunakan Vuex, anda boleh mengendalikan pengambilan dan pemprosesan data tertiari dengan mudah.

Berikut ialah contoh mudah:

// state
state: {
  firstLevelData: [],
  secondLevelData: [],
  thirdLevelData: [],
},
// mutations
mutations: {
  SET_FIRST_LEVEL_DATA: (state, data) => {
    state.firstLevelData = data;
  },
  SET_SECOND_LEVEL_DATA: (state, data) => {
    state.secondLevelData = data;
  },
  SET_THIRD_LEVEL_DATA: (state, data) => {
    state.thirdLevelData = data;
  },
},
// actions
actions: {
  fetchData({ commit }) {
    axios.get("/api/data").then((res) => {
      commit("SET_FIRST_LEVEL_DATA", res.data.firstLevel);
      commit("SET_SECOND_LEVEL_DATA", res.data.secondLevel);
      commit("SET_THIRD_LEVEL_DATA", res.data.thirdLevel);
    });
  },
},

Dalam contoh, kami menggunakan Vuex untuk mengendalikan pemerolehan dan pemprosesan data peringkat ketiga. Kami menggunakan mutasi untuk menetapkan data dan tindakan untuk mendapatkan data. Ini memudahkan untuk mengurus data peringkat ketiga dan menjadikannya dalam komponen.

Ringkasan

Dalam pembangunan Vue, pemerolehan data tiga peringkat mungkin menjadi masalah biasa. Anda boleh menyelesaikan masalah ini dengan mudah dengan menggunakan komponen rekursif, sifat yang dikira dan Vuex. Anda boleh memilih penyelesaian yang sesuai berdasarkan situasi sebenar anda.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah yang vue tahap tiga data tidak boleh diperolehi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!