How to solve "[Vue warn]: Avoid using non-primitive" error

How to solve the "[Vue warn]: Avoid using non-primitive" error

In Vue.js programming, you may encounter an error named "[ Vue warn]: Avoid using non-primitive" error. This error usually occurs when you use Vue.js components, especially when using non-primitive data types in props or data. In this article, we'll explore how to resolve this error and give a corresponding code example.

The reason for this error is that Vue.js does not support the direct use of non-basic data types as the value of props or data. Basic data types include strings, numbers, Boolean values, null, and undefined, while non-basic data types include objects and arrays.

To solve this error, you can use the following methods:

Method 1: Convert non-basic data types to basic data types
This method is suitable for converting non-basic data types Scenarios for basic data types. You can use the toString() or JSON.stringify() method to convert an object or array into a string, and then pass the string to the Vue component as the value of props or data.

Sample code:

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

In the above code, we convert the data object into a string and pass it to the child component. In child components, raw non-primitive data types can be obtained by parsing the string.

Method 2: Use the special properties provided by Vue
Vue.js provides some special properties that can be used to deal with non-basic data types. The most commonly used ones are Vue's v-bind attribute and v-model attribute.

The v-bind attribute can be used to pass non-basic data type objects or arrays as props to child components. This preserves the characteristics of non-basic data types and avoids errors.

Sample code:

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

In the above code, we use the v-bind attribute to pass the data object as props to the child component.

The v-model attribute can be used to handle two-way binding issues with non-basic data types. By using the v-model attribute, modifications to non-basic data type objects or arrays can be synchronized to the parent component.

Sample code:

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

In the above code, we use the v-model attribute to pass the data object to the child component as a two-way bound value.

To sum up, we can solve the "[Vue warn]: Avoid using non-primitive" error by converting non-primitive data types to basic data types or using special properties provided by Vue. I hope this article is helpful for you to learn and develop Vue.js applications!

The above is the detailed content of How to solve "[Vue warn]: Avoid using non-primitive" error. For more information, please follow other related articles on the PHP Chinese website!