Setting non-reactive data in Vue 2 components: A step-by-step guide

Question

Setting non-reactive data in Vue 2 components: A step-by-step guide

I have an array of categories that is loaded once in the created hook and remains static thereafter. I am rendering these values in a component template.

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

My data property does not include myArray as I do not want reactive binding:

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

In my create hook:

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

The issue arises when Vue throws an error stating that I cannot use myArray in the template because it is not available when the DOM is mounted.

So how can I achieve this? And where should component constants be stored?

javascript vue.js components vuejs2

Answer 1

Answer №1

Vue ensures that all properties in the data option are reactive by setting them as setters/getters. For a deeper understanding of reactivity, refer to Reactivity in depth

If you want myArray to remain static, you can define it as a custom option accessible through vm.$options

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

You can loop through this custom option in your template like this:

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

Check out the JSFiddle example

Answer 2

Vue ensures that all properties in the data option are reactive by setting them as setters/getters. For a deeper understanding of reactivity, refer to Reactivity in depth

If you want myArray to remain static, you can define it as a custom option accessible through vm.$options

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

You can loop through this custom option in your template like this:

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

Check out the JSFiddle example

Answer 3

Answer №2

Indeed, it is possible to set properties on this within the created() hook without any issues:

<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>

The output will be:

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

You can check out a live demonstration here: https://codesandbox.io/s/r0yqj2orpn.

Answer 4

Indeed, it is possible to set properties on this within the created() hook without any issues:

<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>

The output will be:

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

You can check out a live demonstration here: https://codesandbox.io/s/r0yqj2orpn.

Answer 5

Answer №3

My personal preference is to utilize static data (non-reactive) in this manner:

To start, create a mixin (I usually name it static_data.js) with the following 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 wish to incorporate static data, implement the following:

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
  }
}

You may also want to check out the package vue-static

Credits can be found here.

Answer 6

My personal preference is to utilize static data (non-reactive) in this manner:

To start, create a mixin (I usually name it static_data.js) with the following 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 wish to incorporate static data, implement the following:

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
  }
}

You may also want to check out the package vue-static

Credits can be found here.

Answer 7

Answer №4

To store the data in a secure way, it is recommended to utilize Object.freeze(), as outlined on the Mozilla Developer Network:

One noteworthy exception would be the application of Object.freeze(), which prohibits modifications to existing properties and subsequently hinders the reactivity system from tracking changes.

Answer 8

To store the data in a secure way, it is recommended to utilize Object.freeze(), as outlined on the Mozilla Developer Network:

One noteworthy exception would be the application of Object.freeze(), which prohibits modifications to existing properties and subsequently hinders the reactivity system from tracking changes.

Answer 9

Answer №5

If you're looking to eliminate reactivity from an object, give this code snippet a shot. It allows you to create a new object with no reactivity by copying the original.

const newObj = JSON.parse(JSON.stringify(obj));

Answer 10

If you're looking to eliminate reactivity from an object, give this code snippet a shot. It allows you to create a new object with no reactivity by copying the original.

const newObj = JSON.parse(JSON.stringify(obj));

Answer 11

Answer №6

 <section>
  <div id="container">
    <ul>
      <li v-for="element in newArray" :key="element">
        {{ element }}
      </li>
    </ul>
  </div>
</section>

<script>
export default {
  name: "container",
  data () {
    this.newArray = [
      'element A',
      'element B'
    ];
    return {}
  }
};
</script>

Answer 12

 <section>
  <div id="container">
    <ul>
      <li v-for="element in newArray" :key="element">
        {{ element }}
      </li>
    </ul>
  </div>
</section>

<script>
export default {
  name: "container",
  data () {
    this.newArray = [
      'element A',
      'element B'
    ];
    return {}
  }
};
</script>

Setting non-reactive data in Vue 2 components: A step-by-step guide

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Combine both typescript and javascript files within a single Angular project

Parsing error coming up with Angular's ng-model on selection input designation

Using Struts2 actions in combination with jQuery AJAX calls

In React, the `context` is consistently an empty object

What is preventing me from adding a borderRadius to this particular React bootstrap tab?

Tips for verifying conditional input fields in a React component?

How can I prevent the <br/> tag from being included on every new line when exporting data to PDF in jQuery Datatable?

What is the best way to ensure a PrimeVue TabPanel takes up the full vertical space and allows the content within the tabs to be scroll

What could be the reason for JSON refusing to accept an element from an array?

The v-checkboxes will be activated upon the initial loading of the page

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Top method for handling multiple conditions - JavaScript

Utilizing AWS SDK (S3.putObject) to transfer a Readable stream to Amazon S3 using node.js

What steps can be taken to enable users to draw a path on a Google Map?

What is the best way to retrieve the value of a textbox using jQuery and ajax?

Is it possible to create a personalized serialize form when sending an AJAX POST request

What causes the error message "ng-model is undefined"?

Tips on sorting a FileList object selected by a directory picker in JavaScript/TypeScript

Display a PDF file within an IFrame using JavaScript and then print it

What is the best way to transfer data between components in VueJS while utilizing the Vue router?