许多 if 条件 -- if 与数组条件

Question

我是 vue.js 新手，我对我的代码有疑问。症状的控制台刚刚出现，但疾病却没有出现。 。 那么关于条件就是用户选择了一些症状，从而系统根据症状显示疾病名称**

<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>
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>

谢谢您的帮助

Answer 1

您可以映射您的数据并使用

find

和

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Answer 2

您比较数组的方式是错误的，您可以执行以下操作：

// 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"
}