How to make a template variable non-reactive in Vue

vue non reactive data
vue set
vue reactive forms
vue js static variable
vue set array
how vue js works
vue component static data
vue observable

I have an edit form with variables held in the data(). I don't want the title of the edit page to update yet I want to maintain the v-model sync of data between the input and data. What's the simplest way to make the title non-reactive in the h1 tag? Mr You has to have something up his sleeve for this..

<template>
    <div>
        <h1>{{ title }}</h1>
        <input v-model="title">
    </div>
</template>

<script>    
export default {
    data: {
        title: 'Initial value'      
    }
}
</script>

The Vue docs recommend Object.freeze() on the returned object in data() to disable reactivity on properties:

data() {
  return Object.freeze({ title: 'Initial value' })
}

But the caveat is it freezes all properties (it doesn't look like there's a way to freeze only some properties using this method), and using v-model with this causes console errors (Cannot assign to read only property).

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() { 
    return Object.freeze({
      message: 'Hello Vue.js!',
    })
  }
})
<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message"> <!-- XXX: Cannot use v-model with frozen property. This will cause a console error. -->
</div>

below ('Pi'). Will it go to the global scope? Is it good way to create non reactive variable? I dont intent to use it in the template for binding … So, it's not a local variable, as such, rather, it's a locally assigned component scope (non-reactive) variable. Do note that this attribute does not have to be declared in your data component first. However, if you don't declare it, it will not be reactive.


If you don't want the input to change the value of your data item, use value to bind it rather than the two-way v-model. Then it just acts as an initializer for the input.

If you want to have two values, one that doesn't change and one that does that gets initialized from the other, you need to have two data items. The non-changing one can be a prop with a default value. The other is a data member which, if you use a data function, can initialize itself to the prop value.

new Vue({
  el: '#app',
  props: {
    initTitle: {
      default: 'Initial value'
    }
  },
  data() {
    return {
      title: this.initTitle
    };
  }
});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <h1>{{ initTitle }}</h1>
  <input v-model="title">
  <div>Title is "{{title}}"</div>
</div>

private variables that are not made reactive and are not watched used in templates but do not change and don't need to be reactive), Vue's  How to set a component non-reactive data in Vue 2? 416. I cant use myArray in a template, because this variable is not created when the DOM is created - mounted.


Working backwards from the contents of this blog...

It appears that when you create an object for Vue, it creates the properties with reactive getters and setters. If you then append a property to that object out-of-band, then it won't get the reactive capability, but will still be accessible as a value.

This should solve it for you:

<template>
    <div>
        <h1>{{ titleContainer.value }}</h1>
        <input v-model="title">
    </div>
</template>

<script>    
export default {
    data: {
        titleContainer: {}
    }
}
titleContainer.value = "Initial Value"
</script>

Ever had to deal with caching method calls inside Vue templates? rather, it's a locally assigned component scope (non-reactive) variable. Do note that this attribute does not have to be declared in your data component first. Vue-Static. This plugin enables you to have variables in your Vue component that don't have reactivity. Why. Sometimes you don't want reactivity for some of your variables e.g. because they contain other objects (leafletjs maps or similar) or because they are huge and you don't need reactivity for them (e.g. big objects).


You could potentially use v-once directive for your purpose if you don't want to create a separate variable for input. From the docs:

Render the element and component once only. On subsequent re-renders, the element/component and all its children will be treated as static content and skipped.

new Vue({
  el: "#app",
  data: {
    title: "initial value"
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>

<div id="app">
  <input v-model="title">
  <p>Reactive title: {{ title }}</p>
  <p v-once>Static title: {{ title }}</p>
</div>

So, it's not a local variable, as such, rather, it's a locally assigned component scope (non-reactive) variable. Do note that this attribute does not  Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share your research! But avoid … Asking for help, clarification, or responding to other answers. Making statements based on opinion; back them up with references or personal experience. To learn more, see our tips on writing great


It's not just the ease in which it allows you to build dynamic UIs, but the fact Even though this usage of reactivity is one of the key feature of Vue.js, it is To make it available to the render context (the template) simply return it  After all, if such data is non-reactive, your template will not render reactively to those data anyway if your template references such datawhich is something you must seriously consider beforehand especially if passing them as props to your components, since they aren't reactive anyway.


In this post, we'll see how we can create private variables in vue. then we'd have to create a private variable or a variable that is not reactive. variable in the created hook and use the same variable in the vue template. This approach can be useful to make data non-reactive when there's no way to control how the data is stored in the store. For example when store data is completely replaced client-side to "hydrate" a server-side rendered website (e.g. Nuxt).


Reactive variables in template functions Due to how Vue determines reactivity it is not possible to use reactive variables directly in template functions To prevent this, either make sure there is any metaInfo configured (on any component)  Let's say you want to create a dynamic property called "fullname" that concatene the lastname and firstname to make a single string. This dynamic property will be a function, we will tell it to concatenate the lastname with the firstname.