[Vuejs]-Vue js conditionnal v for data

by

1👍

✅

If you store the languages as an object, like this:

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

You should be able to key into it like:

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

1👍

Put your languageActive in brackets so it will access en property:

<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,
👤bill.gates

1👍

You can use ternary operator in your v-for like this:

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

Simple example here: https://codesandbox.io/s/pensive-darkness-bn55w?file=/src/App.vue

👤Owl

Leave a comment