Vue. A variable that changes dynamically in v-if conditions

Question

Vue. A variable that changes dynamically in v-if conditions

How can I include a variable in a v-if statement based on my specific situation? I have a data variable called language = 'en' and a large json object with data in multiple languages (referred to as message). Here is an example of the structure of the message json:

"message": {
  "en": 1,
  "es": 2
}

I would like the code to look something like this:

<span v-if="message.lang">some data</span>

When written like this, it functions properly:

<span v-if="message.en">some data</span>

However, when attempting to use a variable like so:

<span v-if="message[lang]">some data</span>

The above approach does not work as expected, preventing the use of the lang variable. Is there anyone who can assist me with this issue?

javascript vue.js

Answer 1

Answer №1

Instead of modifying your message object directly, you can utilize the lang property as a computed property that points to a specified property currentLang="en" in your data. This allows you to dynamically update the language property without changing the original message object. Here's an example:

 data: {
        currentLang: 'en',
        ...
      }

When the corresponding button is clicked, invoke a method like this:

onLangChange(event){
this.currentLang = "es";
}

Any change to currentLang will trigger the computed function for lang:

 computed: {
    lang: function () {
      return this.currentLang;
    }
  }

This will automatically reflect the changes in the HTML:

 <span v-if="message[lang]">some data</span>

Answer 2

Instead of modifying your message object directly, you can utilize the lang property as a computed property that points to a specified property currentLang="en" in your data. This allows you to dynamically update the language property without changing the original message object. Here's an example:

 data: {
        currentLang: 'en',
        ...
      }

When the corresponding button is clicked, invoke a method like this:

onLangChange(event){
this.currentLang = "es";
}

Any change to currentLang will trigger the computed function for lang:

 computed: {
    lang: function () {
      return this.currentLang;
    }
  }

This will automatically reflect the changes in the HTML:

 <span v-if="message[lang]">some data</span>

Answer 3

Answer №2

Have you set the lang property in your data properly?

<template>
  <h1>{{ message[lang] }}</h1>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      lang: 'en',
      message: {
        en: 'foo bar',
        fr: 'machin truc'
      }
    }
  }
};
</script>

You might want to explore https://github.com/kazupon/vue-i18n for further clarification.

Answer 4

Have you set the lang property in your data properly?

<template>
  <h1>{{ message[lang] }}</h1>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      lang: 'en',
      message: {
        en: 'foo bar',
        fr: 'machin truc'
      }
    }
  }
};
</script>

You might want to explore https://github.com/kazupon/vue-i18n for further clarification.

Vue. A variable that changes dynamically in v-if conditions

Answer №1

Answer №2

Similar questions

Limiting the number of times a specific character appears using a regular expression

Issue with Electron | JavaScript Runtime

Error message: "jQuery Ajax CORS request returning undefined value"

Steer clear of downloading images while on your smartphone

Don't forget to retain filled values when navigating with Vue Router

"Utilizing Bootstrap Tour for Easy Navigation: Automatically Scroll Back to the Top with

Determining the background image size of a div when the window is resized

Having trouble with your JavaScript regex not functioning properly?

Determine the number of entries in a JSON object

Can the ThreeJS element be seen?

Retrieving a list of numbers separated by commas from an array

A Vue.js component containing a decimal variable within its data

Trouble arises when trying to define the style for an element generated through the Document

Error message notifying user that an index is not defined in an ajax

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Utilizing the power of AngularJS in conjunction with the Edmunds Media API to retrieve stunning

Using Plotly.js within a deleted Vue.js component may result in displaying an incorrect chart

Retain the user's input in the text box even after the form has been submitted

Setting limits to disable or remove specific times from the time picker input box in Angular

Optimal strategies for designing navigation bars on contemporary websites