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

How to set a component non-reactive data in Vue 2?


Vue sets all the properties in the data option to setters/getters to make them reactive. See Reactivity in depth

Since you want myArray to be static you can create it as a custom option which can be accessed using vm.$options

export default{    data() {        return{            someReactiveData: [1, 2, 3]        }    },    //custom option name myArray    myArray: null,    created() {        //access the custom option using $options        this.$options.myArray = ["value 1", "value 2"];    }}

you can iterate over this custom options in your template as follows:

<template>    <ul>        <li v-for="item in $options.myArray">{{ item }}</li>    </ul></template>

Here is the fiddle


Actually, setting properties on this in created() should work out of the box:

<template>  <div id="app">    <ul>      <li v-for="item in myArray" :key="item">        {{ item }}      </li>    </ul>  </div></template><script>export default {  name: "app",  created() {    this.myArray = [      'item 1',      'item 2'    ];  }};</script>

will render

<div id="app">  <ul>    <li>      item 1    </li>    <li>      item 2    </li>  </ul></div>

Demo here: https://codesandbox.io/s/r0yqj2orpn .


I prefer using static data (non reactive) like this:

Create a mixin (i name it static_data.js) with the follow content

import Vue from 'vue'Vue.prototype.$static = {}export default {  beforeCreate () {    const vue_static = this.$options.static    const vue_static_destination = this.$static || this    if (vue_static && typeof(vue_static) === 'function') {      Object.assign(vue_static_destination, vue_static.apply(this))    } else if (vue_static && typeof(vue_static) === 'object') {      Object.assign(vue_static_destination, vue_static)    }        }}

In your components where you want to use static data you can do:

import use_static_data from '@mixins/static_data'export default {  mixins: [use_static_data],  static: () => ({    static_value: 'Vue is awesome'  }),  created () {    console.log(this.$static.static_value); // Vue is awesome  }}

There is also a package vue-static

Credits here.