Vue js:故障排除 - 讀取未定義的「$refs」屬性
P粉848442185
P粉848442185 2023-11-07 23:34:12
0
1
734

收到錯誤無法讀取未定義的屬性(讀取“$refs”)儘管我在模板中有一個引用。這是否意味著我必須使用 Vue 掛鉤鉤子?

<div class="input-wrapper">
   <input type="text" id="phone" placeholder="(555) 555-5555" ref="input"/>
</div>
                            
<script>                   
  this.$refs.input.addEventLis tener('input', function () {
        // some code
 });
</script>


#
P粉848442185
P粉848442185

全部回覆(1)
P粉752290033

在 Vue 元件的 的根内部,在 Vue 2 和 Vue 3 中,this未定义


查看此處。 。 p>


Vue 模板引用只能在發生的任何鉤子或方法內存取在元件安裝之後和卸載之前。

這表示最早您可以引用的this.$refs位於已安裝最新位於 beforeUnmount 。您也可以在這兩個時刻之間發生的任何掛鉤或方法中存取它們。


考慮到您正在嘗試向HTMLInputElement 添加事件偵聽器,我建議使用v-on 指令,該指令會在掛載時自動新增事件偵聽器,並在卸載時將其刪除。

就您而言:


                            
sssccc

順便說一句,您應該知道常規函數的 this 無法存取元件上下文,除非它是箭頭函數:

export default {
  mounted() {
    this.$refs.input.addEventListener('input', function() {
      /*
       * Here `this` is the context of the current function, you can't 
       * access methods, computed, data or props of the component.
       * You'd need to make it an arrow function to access the component scope
       */
    })
  }
}

而在任何方法中(例如:上面的 myFn),this 是元件上下文,它可以存取所有元件成員。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板