मैं एक अनुकूलित वर्चुअल कीबोर्ड बनाने जा रहा हूं, इसलिए यह पहली समस्या है जिसका मुझे सामना करना पड़ा है। मेरे पास एक input तत्व है, जिसका मान बाहर से बदल जाता है, मेरे मामले में एक बटन दबाकर। समस्या यह है कि सामान्य 'change' घटना को ट्रिगर करने का कोई तरीका नहीं है।

न तो input के बाहर क्लिक करने, और न ही एंटर दबाने से कोई परिणाम मिलता है। इस समस्या को हल करने का सही तरीका क्या हो सकता है?

<template>
  <div class="app-input">
    <input @change="onChange" type="text" v-model="value" ref="input">
    <button @click="onClick">A</button>
  </div>
</template>

<script>
export default {
  name: "AppInput",
  data() {
    return {
      inputDiv: null,
      value: ""
    };
  },
  props: {
    msg: String
  },
  methods: {
    onClick() {
      this.value = this.value + "A";
      this.inputDiv.focus();
    },
    onChange() {
      alert("changed");
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.inputDiv = this.$refs.input;
    });
  }
};
</script>

पूरा पेन यहां मिल सकता है।

2
Eugene Barsky 23 नवम्बर 2019, 18:29
मैं वास्तव में स्पष्ट नहीं हूं कि आप क्या हासिल करने की कोशिश कर रहे हैं, क्या आप कृपया विस्तार से बता सकते हैं?
 – 
Towkir
23 नवम्बर 2019, 18:51
धन्यवाद। मैं अंततः वर्चुअल कीबोर्ड के साथ एक 'कस्टम' इनपुट बनाना चाहता हूं, और इसे वेनिला input के बजाय उपयोग करना चाहता हूं। समस्या यह है कि मैं वेनिला 'परिवर्तन' घटना को दोहरा नहीं सकता।
 – 
Eugene Barsky
23 नवम्बर 2019, 19:04
यदि आप किसी भी विधि को Vue घटक के बाहर से सक्रिय करना चाहते हैं, तो आपको किसी भी घटना को सक्रिय करने की आवश्यकता नहीं है। इसके बजाय बस फ़ंक्शन चलाएं। मान लीजिए कि आपके पास ref=comp के साथ एक घटक है और आपका vue उदाहरण एक const var vm = new Vue({}); के रूप में लिपटा हुआ है, तो आप vm.$refs.comp.doSomething(); के साथ किसी भी फ़ंक्शन को सक्रिय कर सकते हैं। अगर आपको और मदद चाहिए तो मुझे मैसेज करें।
 – 
Smit Patel
25 नवम्बर 2019, 00:39

2 जवाब

v-on:change केवल उपयोगकर्ता कार्रवाई से इनपुट तत्व पर प्रत्यक्ष परिवर्तन पर ट्रिगर होगा।

आप जो खोज रहे हैं वह आपकी डेटा प्रॉपर्टी के लिए wathcer है, जब भी आपका value परिवर्तन, द्रष्टा आपके वांछित कार्य या कार्य को निष्पादित करेगा।

watch: {
  value: function() {
    this.onChange();
  }
}

watch सिंटैक्स प्रदान किए गए आधिकारिक vuejs डॉक्स लिंक पर विस्तृत है। अपनी डेटा प्रॉपर्टी को कुंजी के रूप में उपयोग करें और एक फ़ंक्शन को मान के रूप में प्रदान करें।

स्निपेट की जाँच करें।

export default {
  name: "AppInput",
  data() {
    return {
      inputDiv: null,
      value: ""
    };
  },
  props: {
    msg: String
  },
  methods: {
    onClick() {
      this.value = this.value + "A";
      this.inputDiv.focus();
    },
    onChange() {
      alert("changed");
    }
  },
  // this one:
  watch: {
    value: function() {
      this.onChange();
    }
  },
  // --- rest of your code;
  mounted() {
    this.$nextTick(() => {
      this.inputDiv = this.$refs.input;
    });
  }
};
4
Towkir 23 नवम्बर 2019, 19:40
समस्या यह है कि यदि यह प्रत्येक मूल्य परिवर्तन पर onChange को ट्रिगर करता है (जो कि watcher के साथ होगा) तो वैनिला input ऐसा नहीं है।
 – 
Eugene Barsky
23 नवम्बर 2019, 20:11
जिस घटना के बारे में आप बात कर रहे हैं वह change घटना है, यह आमतौर पर काम करता है जैसे कि आप कुछ टाइप करते हैं और input तत्व फोकस खो देता है, और यदि कोई परिवर्तन होता है तो घटना ट्रिगर होती है, लेकिन जब आप चुनते हैं कस्टम बटन पर क्लिक करें, आपका इनपुट तत्व पहले से ही खो गया फोकस , और आप इसे हर बार मैन्युअल रूप से फ़ोकस कर रहे हैं
 – 
Towkir
23 नवम्बर 2019, 20:16
मैं इसे समझता हूं, इसलिए मैं सोच रहा हूं, समाधान क्या हो सकता है ...
 – 
Eugene Barsky
23 नवम्बर 2019, 20:48
2
तब आपको एहसास होना चाहिए कि ये 2 कथन सह-अस्तित्व में क्यों नहीं हो सकते: "समस्या यह है कि यदि यह प्रत्येक मूल्य परिवर्तन पर परिवर्तन पर ट्रिगर करता है" - "मैं इसे सामान्य इनपुट के जितना संभव हो सके काम करना चाहता हूं, जहां हमारे पास परिवर्तन घटना है फोकस ब्लर, एंटर आदि। एक अक्षर जोड़ने पर नहीं"। यह दोनों तरह से नहीं हो सकता।
 – 
Dan
24 नवम्बर 2019, 14:14
2
यह स्पष्ट नहीं है कि आप क्या चाहते हैं। आप या तो प्रत्येक अक्षर परिवर्तन के बाद कुछ प्रसंस्करण कर सकते हैं या किसी अन्य घटना को संसाधित करने के लिए चुन सकते हैं, जैसे एंटर कीप्रेस। यह सिर्फ इतना है कि बदलाव शायद एक विकल्प नहीं है क्योंकि हर वर्चुअल बटन प्रेस पर इनपुट धुंधला हो जाता है, और अगर कुछ टाइपिंग भी हुई है तो ब्लर ट्रिगर बदल जाते हैं। (क्या उपयोगकर्ता वास्तविक कीबोर्ड के साथ भी टाइप कर सकता है?) यदि आपको change ईवेंट का उपयोग करना चाहिए, तो सबसे अच्छा तरीका संभवतः एक कस्टम इनपुट रैपर घटक और emit change बनाना है। चाहते हैं।
 – 
Dan
24 नवम्बर 2019, 14:56

जब मैं कोई नया वीयू एप्लिकेशन बनाता हूं, तो मैं इन घटनाओं का उपयोग खोज इनपुट या अन्य इनपुट के लिए करना चाहता हूं जहां मैं @change पर किसी भी फ़ंक्शन को सक्रिय नहीं करना चाहता हूं।

<div class="class">
   <input v-model="searchText" @keyup.esc="clearAll()" @keyup.enter="getData()" autofocus type="text" placeholder="Start Typing ..."/>
   <button @click="getData()"><i class="fas fa-search fa-lg"></i></button>
</div>

ये मेरी राय में बेहतर उपयोगकर्ता अनुभव प्रदान करेंगे।

1
Smit Patel 24 नवम्बर 2019, 04:58