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

1 réponse

Meilleure réponse

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