Javascript Vue。v-if中的动态变量

在我的情况下，有没有办法在v-if语句中添加变量？ 我在data

language='en'

中有一个变量，它是一个大json，包含一些多语言的数据（称为message）。 消息json如下所示：

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

然后我想这样编码

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

一些数据

它是这样工作的

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

一些数据

它不起作用

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

一些数据

但是这样我就不能使用lang变量。

---

有人能帮我解决这个问题吗？

您是否在数据中定义了

lang

属性

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

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

{{message[lang]}
导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
朗:"嗯",，
信息：{
恩：‘福吧’，
fr:“机械战”
}
}
}
};

---

我想您应该看看

您是否在数据中定义了

lang

属性

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

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

{{message[lang]}
导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
朗:"嗯",，
信息：{
恩：‘福吧’，
fr:“机械战”
}
}
}
};

---

我想你应该看看

不要更改你的消息对象。只需将

lang

属性用作计算属性，即可返回数据中定义的属性

currentLang=“en”

，并动态更改该属性。例如：

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

在相应的按钮上，单击调用如下方法：

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

因此，每当

currentLang

更改其

lang

值时：

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

然后它会相应地更新html：

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

一些数据

不要更改消息对象。只需将

lang

属性用作计算属性，即可返回数据中定义的属性

currentLang=“en”

，并动态更改该属性。例如：

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

在相应的按钮上，单击调用如下方法：

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

因此，每当

currentLang

更改其

lang

值时：

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

然后它会相应地更新html：

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

一些数据

message

需要是一个对象数组，这样才能工作：

“message”：[{“lang”：“en”}，{“lang”：“es”}]

变量

lang

在哪里/如何定义？如果它未以任何方式绑定到Vue组件，则您将无法访问它。解决此问题的一种方法是使用监视程序。创建一个名为activeLang的变量，在lang（您正在谈论的动态变量）上使用观察程序，在lang变量更改时更改activeLang的值，并将activeLang变量绑定到v-if。用户可以通过单击“用英语显示此消息”等按钮更改lang变量etc

message

需要是一个对象数组，这样才能工作：

“message”：[{“lang”：“en”}，{“lang”：“es”}]

变量

lang

在哪里/如何定义？如果它未以任何方式绑定到Vue组件，则您将无法访问它。解决此问题的一种方法是使用监视程序。创建一个名为activeLang的变量，在lang（您正在谈论的动态变量）上使用watcher，在lang变量更改时更改activeLang的值，并将activeLang变量绑定到v-If。如果用户可以通过单击“用英语显示此消息”等按钮更改lang变量，谢谢您的回答，我已经在使用i18n了。是的，我在数据中保护lang属性。我的问题是，我从数据库中提取的一些数据，其中一些数据有多个翻译，因此我不想（使用v-if）检查这些数据是否具有所选语言，如果没有，则显示在“没有翻译”

word没有翻译

所以正确的语法是

v-if=“message[lang]”

如果message[lang]没有定义，那么它应该可以正常工作并且是错误的。谢谢你的回答，我已经在使用i18n了。是的，我在数据中保护lang属性。我的问题是，我从数据库中提取的一些数据，其中一些数据有多个翻译，因此我不想（使用v-if）检查这些数据是否具有所选语言，如果没有，则显示在“没有翻译”

word没有翻译

所以正确的语法是

v-if=“message[lang]”

如果message[lang]没有定义，那么它应该工作正常并且是错误的。您提供的最后一个v-if是错误的，因为这样我会有一个错误。“message”json没有“lang”属性。有，例如，message.en和message.esyes是的，它不应该像这个消息['lang']。我一看到就更新了。对不起，您提供的最后一个v-if是错误的，因为这样我会出错。“message”json没有“lang”属性。有，例如，message.en和message.esyes是的，它不应该像这个消息['lang']。我一看到就更新了。很抱歉