键入错误单击vue中的搜索图标时非法调用

kd3sttzy 于 2023-03-24 发布在 Vue.js

关注(0)|答案(1)|浏览(128)

我在控制台得到一个“非法调用”错误。当我点击搜索图标

'focus' called on an object that does not implement interface HTMLElement.

有时我会犯这个错误。

<div class="search-wrap">
  <input
    ref="searchInput"
    v-model="searchData"
    type="text"
    class="form-control search-input not-as-small"
    placeholder="Search by name"
    @input="inputSearchValue"
  >
    <i
      class="search-strong search-input-icon"
      @click.prevent="$refs.searchInput.focus"
    />
</div>

vue.js

来源：https://stackoverflow.com/questions/75810469/type-error-illegal-invocation-while-click-on-search-icon-in-vue

1条答案

按热度按时间

a2mppw5e1#

应该是$refs.searchInput.focus()而不是应该是$refs.searchInput.focus
现场演示**：**

new Vue({
  el: '#app',
  data: {
    searchData: ''
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input
         ref="searchInput"
         v-model="searchData"
         type="text"
         class="form-control search-input not-as-small"
         placeholder="Search by name"
         >
  <button
     class="search-strong search-input-icon"
     @click.prevent="$refs.searchInput.focus()"
     >Focus on Input</button>
</div>

赞(0）回复(0）举报 2023-03-24

我来回答

键入错误单击vue中的搜索图标时非法调用

1条答案

相关问题

热门标签

最新问答