Cara menyelesaikan "[Vue warn]: Elakkan menggunakan ralat bukan primitif".

Cara menyelesaikan "[Vue warn]: Elakkan menggunakan ralat bukan primitif"

Dalam pengaturcaraan Vue.js, anda mungkin menghadapi ralat bernama "[Vue warn]: Elakkan menggunakan bukan primitif" . Ralat ini biasanya berlaku apabila anda menggunakan komponen Vue.js, terutamanya apabila menggunakan jenis data bukan primitif dalam prop atau data. Dalam artikel ini, kami akan meneroka cara menyelesaikan ralat ini dan memberikan contoh kod yang sepadan.

Sebab ralat ini ialah Vue.js tidak menyokong penggunaan langsung jenis data bukan asas sebagai nilai prop atau data. Jenis data asas termasuk rentetan, nombor, nilai Boolean, nol dan tidak ditentukan, manakala jenis data bukan asas termasuk objek dan tatasusunan.

Untuk menyelesaikan ralat ini, anda boleh menggunakan kaedah berikut:

Kaedah 1: Tukar jenis data bukan asas kepada jenis data asas
Kaedah ini sesuai untuk senario di mana jenis data bukan asas ditukar kepada jenis data asas. Anda boleh menggunakan kaedah toString() atau JSON.stringify() untuk menukar objek atau tatasusunan kepada rentetan, dan kemudian hantar rentetan kepada komponen Vue sebagai nilai prop atau data.

Kod sampel:

<template>
  <div>
    <child-component :data="dataAsString"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        name: "John",
        age: 20,
        hobbies: ["reading", "swimming"],
      },
    };
  },
  computed: {
    dataAsString() {
      return JSON.stringify(this.data);
    },
  },
};
</script>

Dalam kod di atas, kami menukar objek data kepada rentetan dan menghantarnya kepada komponen anak. Dalam komponen kanak-kanak, jenis data mentah bukan primitif boleh diperoleh dengan menghuraikan rentetan.

Kaedah 2: Gunakan atribut khas yang disediakan oleh Vue
Vue.js menyediakan beberapa atribut khas yang boleh digunakan untuk menangani jenis data bukan asas. Yang paling biasa digunakan ialah atribut v-bind dan atribut v-model Vue.

Atribut v-bind boleh digunakan untuk menghantar objek atau tatasusunan jenis data bukan asas sebagai prop kepada komponen anak. Ini mengekalkan ciri jenis data bukan asas dan mengelakkan ralat.

Kod sampel:

<template>
  <div>
    <child-component v-bind:data="data"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        name: "John",
        age: 20,
        hobbies: ["reading", "swimming"],
      },
    };
  },
};
</script>

Dalam kod di atas, kami menggunakan atribut v-bind untuk menghantar objek data sebagai prop kepada komponen anak. Atribut

v-model boleh digunakan untuk menangani isu pengikatan dua hala bagi jenis data bukan asas. Dengan menggunakan atribut model-v, pengubahsuaian kepada objek atau tatasusunan jenis data bukan asas boleh disegerakkan kepada komponen induk.

Kod sampel:

<template>
  <div>
    <child-component v-model="data"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        name: "John",
        age: 20,
        hobbies: ["reading", "swimming"],
      },
    };
  },
};
</script>

Dalam kod di atas, kami menggunakan atribut model v untuk menghantar objek data kepada komponen anak sebagai nilai terikat dua hala.

Ringkasnya, kami boleh menyelesaikan ralat "[Vue warn]: Elakkan menggunakan bukan primitif" dengan menukar jenis data bukan primitif kepada jenis data primitif atau menggunakan sifat khas yang disediakan oleh Vue. Saya harap artikel ini berguna untuk anda mempelajari dan membangunkan aplikasi Vue.js!

Atas ialah kandungan terperinci Cara menyelesaikan "[Vue warn]: Elakkan menggunakan ralat bukan primitif".. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!