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

Question

I have a categories array, which is loaded once (in created hook) and then it is static all the time. I render this array values in a component template.

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

My data property looks (it does not include myArray - I dont want reactive binding):

data() {     return {         someReactiveData: [1, 2, 3]     }; } 

My create hook:

created() {     // ...     this.myArray = ["value 1", "value 2"];     // ... } 

Problem is, that Vue throw error - I cant use myArray in a template, because this variable is not created when the DOM is created - mounted.

So how to do this? Or where can be stored component constants?

Answer 1

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