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.

<         


        

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:

Here is the fiddle