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.