मैं एक इनपुट फ़ील्ड पर ध्यान केंद्रित करने की कोशिश कर रहा हूं लेकिन मुझे यह त्रुटि मिलती है:

अगली टिक में त्रुटि: "लेखन त्रुटि: अपरिभाषित की संपत्ति 'फोकस' नहीं पढ़ सकता"

यहाँ मेरा कोड है

<span
  v-show="!employeeNumberEdit"
  @click="toggleEdit(numberEdit)"
  v-html="person.number"
/>

<input
  v-show="employeeNumberEdit"
  ref="number"
>

toggleEdit: function(number){
    this.numberEdit = !number;
    if (this.numberEdit) {
      Vue.nextTick(() => {
        this.$refs.number.$el.focus();
      })
    }
}

मुझसे यहां क्या गलत हो रहा है? क्या वह कॉलबैक में this नहीं जानता है?

4
michael 13 अगस्त 2020, 13:13

1 उत्तर

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

आपका इनपुट बॉक्स इस प्रकार है

<input
  v-show="employeeNumberEdit"
  ref="employeeNumber"
>

और टॉगल पर ध्यान केंद्रित करने के लिए कृपया इसे इस तरह करें

toggleEdit: function(number){
    this.numberEdit = !number;
    if (this.numberEdit) {
       this.$refs.employeeNumber.focus();
    }
}

नीचे चल रहा कोड स्निपेट है, जब आप टॉगल बटन दबाते हैं, तो इनपुट बॉक्स केंद्रित हो जाएगा।

new Vue({
     el: '#app',
     methods:{
          toggleEdit: function(number){
            this.numberEdit = !number;
            this.$refs.employeeNumber.focus();
          }
     }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input
  ref="employeeNumber"
>
<button @click="toggleEdit">Toggle</button>
</div>
4
Vipulw 13 अगस्त 2020, 13:27