I have a component called select-diagnosis which is used by many different components. When select-diagnosis is called by a specific component called PtdTreatment, it needs to run a specific function inside the fetchDiagnosis function, while when called by other components it will not run that specific function.

The fetchDiagnosis needs to understand that select-diagnosis component has been called by the PtdTreatment component.

How to do something like that?

This is the code from PtdTreatment component:

<el-form-item
    label="diagnosis"
    prop="dimission_diagnosis"
    v-if="form.data_dimission">
        <select-diagnosis
            v-model="form.diagnosis_dimission"
            :defaultValue="_.get(record, 'clean_diagnosis_dimission')"
        />
</el-form-item>

And this is the select-diagnosis component:

<template>
    <el-select
        v-bind="$attrs"
        :value="value"
        @change="onChange"
        @clear="onClear"
        clearable
        filterable
        remote
        :remote-method="fetchDiagnosis"
        :loading="loadingSelect"
    >
        <el-option
            v-for="item in items"
            :key="`diagnosis-${item.id}`"
            :label="item.code   ' - '   item.description"
            :value="item.code"
        >
        </el-option>
    </el-select>
</template>
<script>
export default {
    name: "SelectDiagnosis",
    inheritAttrs: false,
    props: ["value", "defaultValue"],
    data() {
        return {
            loadingSelect: false,
            items: []
        };
    },
    methods: {
        fetchDiagnosis(query) {
            const valid = query !== "" && query.length > 2;
            if (!valid) return;
            this.loadingSelect = true;
            let params = { string: query };
            axios
                .get("/config/diagnosi", { params })
                .then(({ data }) => {
                    //pseudo code
                    // if this component is called by **select-diagnosis** then do this
                      this.items = data.filter(diagnosi => {
                          const code = diagnosi.codice.replace(/\b0 /g, "");
                          if (code.length >= 4) {
                              return diagnosi;
                          }
                      });
                    // else do this
                       this.items = data;
                })
                .finally(() => (this.loadingSelect = false));
        },
        onChange(x) {
            this.$emit("input", x);
        },
        onClear() {
            this.$emit("input", null);
            this.items = [];
        }
    },
    watch: {
        defaultValue: {
            immediate: true,
            handler(newVal, oldVal) {
                if (newVal && oldVal === undefined) {
                    this.items = [newVal];
                    this.$emit("input", newVal.codice);
                }
            }
        }
    }
};
</script>

CodePudding user response：

You can set a prop on the child component which specifies the 'identity' of the parent component, then test for that in the child:

<select-diagnosis
  v-model="form.diagnosis_dimission"
  :defaultValue="_.get(record, 'clean_diagnosis_dimission')"
  parent="PtdTreatment"
/>

Then in the child (simplified example):

export default {
    props: ["value", "defaultValue", "parent"],
    methods: {
        fetchDiagnosis(query) {
          if (this.parent === "PtdTreatment") {
            // Parent-specific code here
          }
        }
    }
}

CodePudding user response：

There are a number of ways to accomplish this, the two that come to mind immediately use props.

1. You could pass a filterDiagnoses boolean prop to select-diagnosis. If it's true, run the filter logic.

<select-diagnosis v-model="form.diagnosis_dimission" :defaultValue="_.get(record, 'clean_diagnosis_dimission')" :filterDiagnoses="true" />

2. You could invert control to the parent function and expose a filterFn callback prop - the parent function passes a function prop to the child that the child will call upon fetching the diagnoses (this feels cleaner and more extensible):

/* in the PtdTreatment component */
/* ... */
methods: {
  filterDiagnosis(data) {
    // filter data
  },
}

/* in the PtdTreatment template */
<select-diagnosis v-model="form.diagnosis_dimission" :defaultValue="_.get(record, 'clean_diagnosis_dimission')" :filterFn="filterDiagnosis" />

/* in the select-diagnosis component */
fetchDiagnosis(query) {
  const valid = query !== "" && query.length > 2;
  if (!valid) return;
  this.loadingSelect = true;
  let params = { string: query };
  axios
    .get("/config/diagnosis", { params })
    .then(({ data }) => {
      if (this.filterFn) {
        this.items = this.filterFn(data);
      } else {
        this.items = data;
      }
    })
    .finally(() => (this.loadingSelect = false));
  },
}