Home  >  Article  >  Web Front-end  >  How to solve '[Vue warn]: Avoid using non-primitive' error

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

王林
王林Original
2023-08-18 15:07:531705browse

如何解决“[Vue warn]: Avoid using non-primitive”错误

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn