Tips for altering dual data values in Vue

Question

Tips for altering dual data values in Vue

When working with Vue.JS, I encounter the following situation:

data() {
  return {
     name: 'John',
     sentence: "Hi, my name is {{ name }}",
  };
},

In my HTML file, I have the following line:

<h2>{{ sentence}}</h2>

However, when viewing the output, I see:

Hi, my name is {{name}}

The issue here is that the {{name}} placeholder is not being replaced. The reason for this approach is to allow dynamic updates from a database where different sentences can be fetched and the name needs to be interchangeable.

javascript vue.js

Answer 1

Answer №1

Declare sentence as a computed property :

data(){
   return {
         name: 'Alice',      
      };
   },
computed:{
   sentence(){
     return  `Hello, my name is ${ this.name }`
   }
}

Alternatively, you can modify the data with a regex when it is received:

data(){
   return {
         name: 'Alice',  
         sentence :  "Hello, my name is {{ name }}"  
      };
   },
...
this.sentence = resp.data.sentence.replace(/{{.*name.*}}/,this.name);

Answer 2

Declare sentence as a computed property :

data(){
   return {
         name: 'Alice',      
      };
   },
computed:{
   sentence(){
     return  `Hello, my name is ${ this.name }`
   }
}

Alternatively, you can modify the data with a regex when it is received:

data(){
   return {
         name: 'Alice',  
         sentence :  "Hello, my name is {{ name }}"  
      };
   },
...
this.sentence = resp.data.sentence.replace(/{{.*name.*}}/,this.name);

Answer 3

Answer №2

let vueInstance = new Vue({
  el: "#app",
  data() {
    return {
      name: 'John',
      sentence: 'Hi my name is {{ name }}',
      newSentence: 'Thanks {{ name }}!'
    }
  },

  computed: {
    output() {
      return this.sentence.replace(/{{.*name.*}}/, this.name)
    }
  },
  
  methods: {
   changeSentence() {
      this.sentence = this.newSentence
      this.newSentence = 'try anything {{ name }}'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ vueInstance.output }}
  
  <input type="text" v-model="vueInstance.newSentence" />
  <button @click.prevent="vueInstance.changeSentence()">Change</button>
</div>

Answer 4

let vueInstance = new Vue({
  el: "#app",
  data() {
    return {
      name: 'John',
      sentence: 'Hi my name is {{ name }}',
      newSentence: 'Thanks {{ name }}!'
    }
  },

  computed: {
    output() {
      return this.sentence.replace(/{{.*name.*}}/, this.name)
    }
  },
  
  methods: {
   changeSentence() {
      this.sentence = this.newSentence
      this.newSentence = 'try anything {{ name }}'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ vueInstance.output }}
  
  <input type="text" v-model="vueInstance.newSentence" />
  <button @click.prevent="vueInstance.changeSentence()">Change</button>
</div>

Answer 5

Answer №3

Accessing data properties like {{name}} can only be done after the data method has returned. Similarly, using {{this.name}} will result in undefined.

To resolve this issue, you can utilize a computed property:

computed:{
   phrase(){
     return  `Hello, my name is ${ this.name }`
   }
}

Alternatively, you can directly include it inside the template:

<h2>Hello, my name is {{ name }}</h2>

Answer 6

Accessing data properties like {{name}} can only be done after the data method has returned. Similarly, using {{this.name}} will result in undefined.

To resolve this issue, you can utilize a computed property:

computed:{
   phrase(){
     return  `Hello, my name is ${ this.name }`
   }
}

Alternatively, you can directly include it inside the template:

<h2>Hello, my name is {{ name }}</h2>

Answer 7

Answer №4

To expand on Emīls Gulbis' response, one approach is to utilize a watcher to update the value when the sentence changes in the database:


  watch: {
    sentence(newSentence) {
      this.sentence = newSentence.replace('{{ name }}', this.name)
    }
  }

Answer 8

To expand on Emīls Gulbis' response, one approach is to utilize a watcher to update the value when the sentence changes in the database:


  watch: {
    sentence(newSentence) {
      this.sentence = newSentence.replace('{{ name }}', this.name)
    }
  }

Tips for altering dual data values in Vue

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Anticipate the striking impact of Tapestry in JavaScript

What steps can be taken to make the carousel inconsistent when relying on the assigned id in props?

The loading time for the Ajax request is unreasonably slow

What is the reason my CSS formatting isn't being applied in Vue.js?

Issue with PassportJS and Express 4 failing to properly store cookies/session data

Generating an associative array on the fly

How can you replicate a mouseover event using Selenium or JavaScript?

Can you provide an example of JSON for a MultiStep Form that includes a variety of control types for viewing

Setting references to child components with VueRouter in Vue

Is it possible to turn off Vue warnings for a particular component?

Setting up GameClosure on a Windows machine

Maintain consistent theme across various pages using javascript

Discover the method to calculate the combined file size of multiple uploads with jquery

The Null object within localStorage is identified as a String data type

Heroku is rejecting the Discord token, but it is functioning properly in Visual Studio Code

Incorrect interpretation of JavaScript object

Unmounting a Vue3 component in the script setup: A step-by-step guide

Encountering an unexpected issue with $urlMatcherFactory during an AngularJS service unit test

Verification of three-dimensional password format with the use of AngularJS

Issue with parsing an empty array in a Discord bot built with Node.js