Je suis assez nouveau sur Vue.js, merci pour votre compréhension. Je mets en place un projet Vue où je veux montrer les patients et leurs données. Je veux dire depuis le début que je ne prévois pas d'utiliser Vuex :)

Mon projet comporte 3 couches.

Fichier Home.vue où j'importe les données (patients)

La couche suivante est le composant Patients.vue où j'ai une boucle for et je délivre tous les patients. Dans ce cas, je reçois le tableau patient en utilisant des accessoires.

Et la dernière couche est appelée vue ViewPatient.vue. Ce que je veux faire ici, c'est montrer plus de détails sur le patient cliqué. Je veux hériter par exemple du nom pour faire un appel de plus au point final afin de récupérer quelques observations du patient. Par exemple: endpoint / patient / (theName) <- le nom doit provenir du composant Patients.vue précédent.

J'ai essayé beaucoup d'approches différentes: bus d'événements, routeur dynamique et attributs de données.

Home.vue

<template>
  <div class="container">
    <keep-alive>
      <Patients :PatientsData="PatientsData" />
    </keep-alive>
  </div>
</template>

<script>
// @ is an alias to /src
import PatientsData from "../data/messages";
import Patients from "../components/Patients.vue";

export default {
  name: "home",
  data() {
    return {
      PatientsData: PatientsData
    };
  },

  components: {
    Patients
  }
};
</script>

Patients.vue (composant)

<template>
  <div v-if="PatientsData.length > 0">
    <div class="row row-eq-height">
      <div v-for="PatientData in PatientsData" class="col-12 col-sm-6 col-md-3 mb-3" :key="PatientData.content" :data-id="PatientData.content" @click.prevent="passPatientData" >
        <router-link to="/patient" >
          <div class="col-12 patientsTiles p-4">
            <p class="patientsName">
              <span>Navn</span>
              {{ PatientData.content }}
            </p>
            <p class="patientsCPR">
              <span>CPR.nr</span>
              {{ PatientData.subject }}
            </p>
            <p class="patientsAge">
              <span>Alder</span>
              {{PatientData.age}}
            </p>
            <i :class="['fa', 'fa-star', {important: PatientData.isImportant}]"></i>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import router from "../main";
import { eventBus } from "../main";
export default {
  props: {
    PatientsData: Array,
  },
  data(){
    return{
      patientName: ""
    }
  },


  methods: {
    passPatientData() {
      this.patientName = this.PatientData;
      alert(this.patientName);

      eventBus.$emit("passPatientData", this.patientName);
    }
  }

};
</script>

ViewPatient.vue (voir)

<template>
  <div class="container">
    <h1>The Patient detail</h1>
  </div>
</template>

<script>
// @ is an alias to /src
import { eventBus } from "../main";

export default {
  props: {
    // patientId:{
    //     type: String
    // } 
  },
  data() {
    return {
      selectedPatient : ""
    };
  },

  created() {  
      eventBus.$on("passPatientData", data  => {  
        this.selectedPatient = data;
        // console.log("yeaah");

 })}
}
</script>

OMI, le problème réside sur la fonction passPatientData. this.PatientData est vide et je ne sais pas comment passer les données de l'élément cliqué à la chaîne vide (this.patientName), donc je peux les émettre vers le bus d'événements

passPatientData() {
      this.patientName = this.PatientData;
      alert(this.patientName);

      eventBus.$emit("passPatientData", this.patientName);
    }
0
user3374356 5 nov. 2019 à 00:30

2 réponses

Vous avez décidé de ne pas utiliser Vuex. Cela ne signifie pas que vous ne devriez pas utiliser un magasin. Le magasin le plus simple n'est qu'un objet dans les données de votre vue racine, transmis via provide / inject. Mettez vos données partagées là-dedans.

Il s'agit d'un modèle beaucoup plus simple pour se déplacer qu'un bus d'événements. Vous obtenez l'état partagé directement à partir des composants Vue, et parce que ce n'est qu'un objet, qui ne fait que stocker l'état, vous contrôlerez mieux ce que vous avez et comment cela fonctionne.

// Home.vue
export default {
    name: "home",
    provide: { mySharedData: this.mySharedData },
    data() {
        return {
            mySharedData: {
                patientData: {}
            }
        };
    },
    created() {
        fetch("http://patientData")
            .then(response.json)
            .then((patientData) => this.mySharedData.patientData = patientData)
    }
    ...

// Then, in all other components of your app...
export default {
        inject: ['mysharedData'],
        ...
    }

De cette façon, vous utiliserez pleinement la réactivité de Vue pour propager vos modifications. Vous devrez comprendre comment Vue rend les propriétés réactives. En particulier, vous ne pouvez pas simplement assigner de nouveaux accessoires dans mySharedData. Le moyen le plus simple est de vous assurer que tous les accessoires sont là pour commencer. Pour le faire à la volée, utiliser Vue.set () .

0
bbsimonbb 4 nov. 2019 à 22:20

Voici mon approche qui a fonctionné pour moi (quelques changements):

@bbsimonbb, merci pour la réponse, mais je ne vais pas utiliser cette approche, car c'est un peu exagéré par rapport à ma petite tâche.

Dans Patients.vue en bouclant les patients, j'ai modifié l'événement click: je passe en fait l'élément unique qui est cliqué, ce qui a résolu beaucoup de temps.

<div v-for="PatientData in storedPatients" class="col-12 col-sm-6 col-md-3 mb-3" :data-id="PatientData.content" @click="passPatientData(PatientData)" >

Avant:

  @click="passPatientData"

Après:

@click="passPatientData(PatientData)"

Et puis, dans mon bus d'événements, je peux "travailler" avec les données qui passent:

methods: {
    passPatientData(element) {
      this.patientName = element.content;
      alert(this.patientName);

      eventBus.$emit("passPatientData", this.patientName);
    }
  }

Le but est de passer le patientName au fichier ViewPatient.vue en utilisant eventbus et d'appeler un nouveau point de terminaison qui ressemble à ceci: endpoint / patient / (patientName). Le résultat du point final sera alors les détails du patient unique qui a été cliqué chez les patients.

Ça marche. J'espère que cela peut être utile pour d'autres qui sont aux prises avec le même problème.

0
user3374356 5 nov. 2019 à 10:31