Vue js条件数据v

Question

这里是我的代码：

<article class="project-card" 
        v-for="item in en.projects" 

和：

import fr from '../assets/datas/fr.json'
import en from '../assets/datas/en.json'

export default {
  data () {
    return {
      languageActive: 'en',
      en: en,
      fr: fr,

如果languageActive是'en'，我想在v-for中使用'en.projects'，

如果languageActive是'fr'，我想在v-for中使用'fr.projects'，

但是我读到我们不能在v-for中使用v-if。

您知道如何执行此操作吗？谢谢！

Answer 1

如果将语言存储为对象，如下所示：

data() {
  return {
    langs: { en: en, fr: fr }, // or { en, fr } ;)
    languageActive: 'en',
  }
}

您应该能够像这样键入它：

<article class="project-card" v-for="item in langs[languageActive].projects" 

Answer 2

将languageActive放在方括号中，以便它将访问en属性：

<article class="project-card" v-for="item in [languageActive].projects" 

import fr from '../assets/datas/fr.json'
import en from '../assets/datas/en.json'

export default {
  data () {
    return {
      languageActive: 'en',
      en: en,
      fr: fr,

Answer 3

您可以在v-for中使用三元运算符，如下所示：

<div
      v-for="(item, index) in languageActive === 'en' ? en.projects : fr.projects"
      :key="index">
    {{ item }}
</div>

这里的简单示例：https://codesandbox.io/s/pensive-darkness-bn55w?file=/src/App.vue