[Vuejs]-Many if condition — if with array condition

by

-1👍

✅

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>

-1👍

welcome to StackOverFlow. 😀
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"
}

Leave a comment