Informatique

Bonjour,
Je suis en train d'intégrer l'intégralité de mon code JavaScript dans le framework Vue.

Dans un composant content.vue: je gère la langue du contenu à la main (sans internationalisation i18n).

Je remarque que si j'assigne le résultat de la traduction à une variable dans data ou une propriété, il n'y a aucun changement, donc pas de réactivité.

J'ai essayé de créer un observateur sur la variable lang, mais cela ne fait rien.

Je travaille avec Nuxt sur une Web app universelle.

ça pourrait t'aider : https://fr.vuejs.org/v2/guide/reactivity.html

C'est compliqué de t'aider sans exemple de ton code. Mais normalement les data comprises à l'intérieur de ton component Vue sont réactives. Peut être que tu utilise un mauvais keyword pour modifier t'es variables ?

Le 11 septembre 2020 à 19:44:50 Le_Tryall a écrit :
ça pourrait t'aider : https://fr.vuejs.org/v2/guide/reactivity.html

C'est compliqué de t'aider sans exemple de ton code. Mais normalement les data comprises à l'intérieur de ton component Vue sont réactives. Peut être que tu utilise un mauvais keyword pour modifier t'es variables ?

je t'envoie le tout asap

<template>
  <section v-if="content" class="container position-relative text-white">
    <h1>{{ content.motto }}</h1>
    <h2>{{ content.prop }}</h2>
    <ul v-if="content.QA" class="container list-group list-group-item">
      <li v-for="{question,answer} in content.QA" :key="question" class="col-sm">
        <p>{{ question }}</p>
        <p>{{ answer }}</p>
      </li>
    </ul>
  </section>
</template>

<script>
import i18n from '@/assets/i18n'

export default {
  props: {
    lang: {
      type: String,
      default: 'EN'
    },
    content: {
      type: Object,
      default: i18n.translate('en')
    }
  },
  watch: {
    lang: {
      immediate: true,
      deep: true,
      handler () {
        const content = i18n.translate(lang) // aussi ne fonctionne pas si je remplace lang par 'fr'
        this.$emit(this.content, content)
      }
    }
  }
}
</script>

J'ai remarqué quelque chose d'intéressant:
Les données passent très bien en props de layout/default.vue aux components et à la page index.vue. Par contre si je mets un component dans un index et que je fais passer des données en props de cette manière:
layout/default.vue > page/index.vue > component/content.vue
Les données ne sont alors pas visibles pour content.

Je suppose que je devrais effectuer un traitement dans index pour que les données soient lues sur props, puis réécrites sur content.

Effectivement, le framework écrit la prop dans le HTML au lieu de communiquer en JavaScript....