मैं एक VueJS ऐप बना रहा हूं जिसमें divisions नामक नामों की एक सूची है। उपयोगकर्ता एक डिवीजन के लिए एक नया नाम जमा कर सकता है और एक डिवीजन का नाम भी अपडेट कर सकता है। डिवीजनों के नाम रिमोट एपीआई से प्राप्त होते हैं और किए गए किसी भी संपादन को PUT अनुरोध के माध्यम से एपीआई को भी भेजा जाता है। यह अच्छा काम करता है।

हालांकि, समस्या यह है कि मैं किसी उपयोगकर्ता को एक डिवीजन नाम सबमिट करने से कैसे रोक सकता हूं जो पहले से मौजूद है?

मेरे पास एक मूल घटक है (नाम Divisions.vue) जिसमें एक GET अनुरोध है जैसे:

  methods: {
    async getAllDivisions() {
      try {
        this.divisions = (await ApiService.getAllDivisions()).data
      } catch (error) {
        console.error(error)
      }
    }
  },

DivisionEdit.vue नामक फ़ाइल में मेरा कोड इस प्रकार सेट किया गया है

टेम्प्लेट HTML:

<form @submit.prevent="onSubmitUpdate">

    Division Name:
    <input type="text" v-model="division.division" />
    <button type="submit">
      Update Division
    </button>

</form>

स्क्रिप्ट अनुभाग:


data() {
    return {
      division: {
        division: '',
        division_id: null
      },

methods: {
    onSubmitUpdate() {
    ApiService.updateDivision(this.division)
  }
}

और मेरे पास apiService.js जैसा एपीआई सेवा कोड है:

 updateDivision(division) {
    return this.getApiClient().put('/Divisions', division)
  }
1
redshift 31 अक्टूबर 2019, 04:28

1 उत्तर

सबसे बढ़िया उत्तर

आपके पास पहले से ही मूल घटक में सभी डिवीजन हैं, आप इसे चाइल्ड कंपोनेंट के प्रॉप्स के रूप में पास कर सकते हैं

और onSubmitUpdate से पहले चाइल्ड कंपोनेंट में, आपके यहां दो दृष्टिकोण हो सकते हैं

1) आप डिफ़ॉल्ट रूप से अपडेट बटन को अक्षम कर सकते हैं, और @input ईवेंट जोड़कर इनपुट डिवीजन के लिए सत्यापन प्राप्त कर सकते हैं -> यदि पहले से मौजूद है तो डिवीजन की जांच करें, यदि बटन सक्षम नहीं है

<form @submit.prevent="onSubmitUpdate">

    Division Name:
    <input type="text" v-model="division.division" @input="divisionExists" />
    <button type="submit" :disabled="btnDisable">
      Update Division
    </button>

</form>

In Script: 

props: {
  divisions: Object,
},
data() {
    return {
      division: {
        division: '',
        division_id: null
      },
      btnDisable: true,
   }
}
methods: {
    divisionExists() {
      if (this.divisions.map(x => x.division).includes(this.division.division)){
        this.btnDisable = true
      } else {
        this.btnDisable = false;
      }
    },
    onSubmitUpdate() {
    ApiService.updateDivision(this.division)
  }
}

2) आप यह जांचने के लिए ऑनसबमिटअपडेट विधि में सीधे एक शर्त जोड़ सकते हैं कि संपादन डिवीजन पहले से मौजूद है या नहीं, यह अपडेट एपीआई को ट्रिगर नहीं करेगा

onSubmitUpdate() {
if (!this.divisions.map(x => x.division).includes(this.division.division)){
            ApiService.updateDivision(this.division)
         }
    }
1
chans 31 अक्टूबर 2019, 07:40