Sometimes, we want to set a component’s non-reactive data in Vue.js 2.

In this article, we’ll look at how to set a component’s non-reactive data in Vue.js 2.

How to set a component’s non-reactive data in Vue.js 2?

To set a component’s non-reactive data in Vue.js 2, we can set them as properties of this in the created hook.

For instance, we write

<template>
  <div id="app">
    <ul>
      <li v-for="item in arr" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.arr = ["item 1", "item 2"];
  },
};
</script>

to set the non-reactive this.arr property to ["item 1", "item 2"] in the created hook.

And then we render the items in arr with v-for.

this.arr is reactive since the assignment is done in the created hook.

Conclusion

To set a component’s non-reactive data in Vue.js 2, we can set them as properties of this in the created hook.