Soy nuevo con vue.js, tengo una pregunta sobre mi código. la consola del síntoma simplemente aparece pero la enfermedad no lo es. Consola de síntoma y enfermedad . Entonces, sobre la condición, el usuario seleccionó algunos síntomas, por lo tanto, el sistema muestra el nombre de la enfermedad según los síntomas **
<v-container> <p>{{ symptom }}</p> <v-checkbox v-model="symptom" label="Diarrheal" value="Diarrheal" > </v-checkbox> <v-checkbox v-model="symptom" label="Vomit" value="Vomit" ></v-checkbox> <v-checkbox v-model="symptom" label="Red Eyes" value="Red Eyes" ></v-checkbox> <v-checkbox v-model="symptom" label="Tiredness" value="Tiredness" ></v-checkbox> <v-checkbox v-model="symptom" label="Dehydrated" value="Dehydrated" ></v-checkbox> <v-checkbox v-model="symptom" label="Greasy Stools" value="Greasy Stools" ></v-checkbox> <v-checkbox v-model="symptom" label="Swollen Lymph nodes" value="Swollen Lymph nodes" ></v-checkbox> <v-btn color="primary" @click="handleSubmit"> Submit </v-btn> </v-container>Guion
<script> export default { components: {}, data() { return { symptom: [], Disease: "", }; }, methods: { back() { this.$emit("update:cat", null); }, async handleSubmit() { if(this.symptom === ["Vomit","Swollen Lymph nodes","Red Eyes","Tiredness"]){ this.Disease = "Cat Scratch Disease"; } if(this.symptom === ["Diarrheal","Greasy Stools","Dehydrated"]){ this.Disease = "Giardiasis"; } if(this.symptom === ["Diarrheal"]){ this.Disease = "Campylobacter"; } console.log(this.symptom) console.log(this.Disease) }, }, }; </script>Gracias por su ayuda
bienvenido a StackOverFlow. :D
La forma en que está comparando su matriz es incorrecta, puede hacer algo como esto:
// we are checking values and length to make sure nothing is more or less than we expect if (this.symptom.length === 4 && ["Vomit","Swollen Lymph nodes","Red Eyes","Tiredness"].every(item => this.symptom.includes(item))) { this.Disease = "Cat Scratch Disease" } if (this.symptom.length === 3 && ["Diarrheal","Greasy Stools","Dehydrated"].every(item => this.symptom.includes(item))) { this.Disease = "Giardiasis" }Puede mapear sus datos y usar find y every :
new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { symptoms: ['Diarrheal','Vomit','Red Eyes', 'Tiredness', 'Dehydrated', 'Greasy Stools', 'Swollen Lymph nodes'], symptom: [], Disease: "", diseases: [{symptom: ["Vomit","Swollen Lymph nodes","Red Eyes","Tiredness"], disease: "Cat Scratch Disease"}, {symptom: ["Diarrheal","Greasy Stools","Dehydrated"], disease: "Giardiasis"}, {symptom: ["Diarrheal"], disease: "Campylobacter"}] }; }, methods: { handleSubmit() { const res = this.diseases.find(d => d.symptom.length === this.symptom.length && d.symptom.every(e => this.symptom.includes(e)))?.disease this.Disease = res ? res : "" }, }, }) <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <p>{{ symptom }}</p> <v-btn color="primary" @click="handleSubmit"> Submit </v-btn> <strong>{{Disease}}</strong> <div v-for="sympt in symptoms" :key="sympt"> <v-checkbox v-model="symptom" :label="sympt" :value="sympt" > </v-checkbox> </div> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>