Probleme au rechargement de la page


#1

Bonjour à tous,

Je suis nouveau sur vue.js merci de votre compréhension.

Je test vue.js sur un petit projet et j’en suis à essayer de recupérer des données depuis mysql via un fichier php et axios .
Tout marche très bien quand je vais sur la page depuis mon menu (via un routeur) mais la page ni les data ne sont mise à jour si je recharge manellement la page. Je ne sais pas si je suis clair …

Donc,
Un router

    export default new Router({
      routes: [
        {
          path: '/Identifiezvous',
          name: 'Identifiez-vous',
          component: Identifiezvous
        },

Un fichier data.js

    export default {
      dataReady: [
        {
          'dataReady': false
        }
      ],
      testitem: [
        {
          'id': 'no'
        }
      ],....

Un composant

    <template>
      <div class="waiting">
        <div v-for="z in testitem" v-if="dataReady[0].dataReady"><p>{{ dataReady[0].dataReady }} {{ z.id }}</p></div>
      </div>
    </template>
<script>
import data from '../data'
import axios from 'axios'
export default {
  created () {
    var self = this
    this.fetchItems(self)
  },
  methods: {
    fetchItems (self) {
      axios.get('https://kankoiou.com/static/php/test.php')
        .then(function (response) {
          data.testitem = []
          // console.log(response.data.message)
          // console.log(response.data.contenu)
          // console.log(response.data.errors)
          // console.log(response.data.success)
          self.dataReadyChange(response.data.contenu)
          self.$emit('fetchitem')
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    dataReadyChange (tab) {
      var arrayData = JSON.parse(tab)
      var arrayDataLength = arrayData.length - 1
      for (var j in arrayData) {
        console.log(j + ' ' + arrayDataLength + ' ' + arrayData[j].id)
        var temp = arrayData[j]
        var monObjet = {}
        for (var k in temp) {
          // console.log(k + ' : ' + temp[k])
          monObjet[k] = temp[k]
        }
        data.testitem[j] = monObjet
        console.log('monObjet : ' + monObjet)
        console.log('data.testitem[j] = ' + JSON.stringify(data.testitem[j]))
        if (parseInt(j) === parseInt(arrayDataLength)) {
          console.log('result = ' + data.testitem[0].id)
          data.dataReady[0].dataReady = true
        }
      }
    }
  },
  data () {
    return {
      'testitem': data.testitem,
      'dataReady': data.dataReady
    }
  }
}
</script>

Donc si j’ai tout compris, à chaque appel du composant via le routeur “created” lance l’appel axios et une fois le retour du serveur fait met à jour mon tableau “testitem” dans data.js et rafraichi ma page… Ca marche tres bien lorsque je passe par les menus
Par contre si je rafraichi la page “Identifiezvous” manuellement depuis le navigateur, tous mes console.log sont ok, la propriété dataReady" se met bien jour mais PAS “testitem”. Du coup pas de mise à jour de l’affichage… (idem pour le “self.$emit(‘fetchitem’)” qui n’est pas emit sauf à forcer le rechargement 5 ou 6 fois de suite rapidement)

Si vous avez une piste je suis preneur, ca fait 2 jours que je test dans tous les sens sans trouver de solution.


#2

Je reponds à moi même …;

juste enlever l’intitialisation du tableau dans .then()

data.testitem = []

Ben oui… 2 jours de perdu juste pour ca… :confounded: