Vue. A dynamically variable in v-if

Question

Is there any way to add a variable in a v-if statement in my situation? I have a variable in data language = 'en', a big json with some data in multiple language (it's called message). The message json looks like:

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

and then I want to code like this.

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

It works this way

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

It doesn't work

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

but this way I cannot use the lang variable. Can anyone help me with my problem?

message needs to be an array of objects for that way to work: "message": [ {"lang": "en"}, {"lang": "es"} ] — Get Off My Lawn
– Get Off My Lawn, Commented Aug 2, 2019 at 15:46
Where/how is your variable lang defined? If it is not bound to the Vue component in any way, you will not have access to it. — Karl-André Gagnon
– Karl-André Gagnon, Commented Aug 2, 2019 at 15:47
one way to solve it can be by using a watcher. create a variable named activeLang, use a watcher on lang (the dynamic variable you are talking about), change the value of activeLang when the lang variable changes and bind the activeLang variable to v-if — Saud Qureshi
– Saud Qureshi, Commented Aug 2, 2019 at 15:49
Users can change lang variable by clicking on buttons like "show this message in English" etc — Vladyslav Lopatin
– Vladyslav Lopatin, Commented Aug 2, 2019 at 15:49

ambianBeing · Accepted Answer · 2019-08-02 16:07:53Z

3

Don't change your message object. Simply use the lang property as computed property that returns a defined property currentLang="en"in data and dynamically change that property. For example:

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

On the respective button click call a method like:

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

So whenever currentLang changes its gonna trigger computed of lang:

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

And then it will update the html accordingly:

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

answered Aug 2, 2019 at 16:07

ambianBeing

3,5492 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vladyslav Lopatin Over a year ago

The last v-if you have provided is wrong, because this way I will have an error. The "message" json doesn't have 'lang' property. There are, e.g. message.en and message.es

ambianBeing Over a year ago

Yeah it was not meant to be like this message['lang']. I have updated it the moment i saw it. Sorry.

Blitz · Accepted Answer · 2019-08-02 15:56:21Z

1

Did you defined the lang property in your data ?

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

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

I think you should have a look at https://github.com/kazupon/vue-i18n

answered Aug 2, 2019 at 15:56

Blitz

5003 silver badges10 bronze badges

2 Comments

Vladyslav Lopatin Over a year ago

Thanks for your answer, I am already using i18n. Yes, I defend lang property in my data. My problem is that some data I'm fetching from my DB and some of this data has multiple translations, so I wan't to check (with v-if) if those data has the selected language if not then display in "there is no translation". <span v-if="message.???">word</span> <span v-else>There is no translation</span>

Blitz Over a year ago

So the right syntax is v-if="message[lang]" if message[lang] is not defined it should work well and be falsy.

Collectives™ on Stack Overflow

Vue. A dynamically variable in v-if

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related