I am new with vue.js, I have a question about my code. the console of symptom just appear but the disease is not. console of symptom and disease. So about the condition is the user selected some symptoms, thus system show the disease name based on the symptoms**
<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>
Script
<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>
Thank You for your help
welcome to StackOverFlow. :D
The way you are comparing your array is wrong, you can do something like this:
// 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"
}
You can map your data and use find and 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>