没有结果时，输入字段在 Vue 中失去焦点答案

【问题标题】：Input field loos focus in Vue when has no results没有结果时，输入字段在 Vue 中失去焦点
【发布时间】：2020-12-11 07:58:55
【问题描述】：

我有 Vue 应用程序。在里面，我有一些输入字段。如果此字段有任何结果，则前进和后退按钮可见，否则不可见。

我的问题是，当我在输入字段中输入时，当我输入没有结果的内容时，输入松散的焦点。（见sn-p）

想解决这个问题？

new Vue({
  el: '#app',
  data: {
    input: "",
    items: [{
        'id': 123,
        'name': 'item1'
      },
      {
        'id': 124,
        'name': 'item2'
      },
      {
        'id': 128,
        'name': 'item3'
      },
      {
        'id': 237,
        'name': 'item4'
      }
    ]
  },

  computed: {

    search_list_of_workorders: function() {
      var self = this;
      var search_string = this.input.toLowerCase();

      // apply filter
      var array = this.search_filter_array(this.items, search_string);

      return array.slice(0, 10).map(a => a.id);
    },

    number_of_search_results: function() {
      return this.search_list_of_workorders.length
    },

    display_results_buttons: function() {
      return this.number_of_search_results > 0
    },
  },

  methods: {
    search_filter_array: function(array, search_string) {

      return array.filter(function(el) {
        var id_filter = el.id.toString().includes(search_string);
        return id_filter;
      });
    },
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">

  <button type="button" v-if="display_results_buttons">
        Back
  </button>
  <div v-if="display_results_buttons">({{ number_of_search_results }})</div>
  <input placeholder="Search" type="text" list="searchDropDown" id="searchInput" name="selectEventInput" v-model="input" />

  <datalist id="searchDropDown">
     <option v-for="(item, index) in search_list_of_workorders" :value="item" :key="`optionEvents_${index}`" >
     </option>
  </datalist>
  <button type="button" v-if="display_results_buttons">
        Forward
  </button>
</div>

【问题讨论】：

发生这种情况是因为您隐藏了其他元素

标签： javascript html vue.js input

【解决方案1】：

使用v-show 代替v-if。这将完美解决您的问题！

主要区别：

v-if：仅当表达式通过时才将元素呈现给 DOM。
v-show：将所有元素渲染到 DOM，然后在表达式失败时使用 CSS display 属性隐藏元素。

用例：

v-show：昂贵的初始加载，便宜的切换，
v-if：廉价的初始加载，昂贵的切换。

在您的情况下，切换是强制性的，并且可能需要多次，因此v-show 是一个更好的解决方案。此外，它不需要重新渲染，还可以解决焦点丢失问题。

new Vue({
  el: '#app',
  data: {
    input: "",
    items: [{
        'id': 123,
        'name': 'item1'
      },
      {
        'id': 124,
        'name': 'item2'
      },
      {
        'id': 128,
        'name': 'item3'
      },
      {
        'id': 237,
        'name': 'item4'
      }
    ]
  },

  computed: {

    search_list_of_workorders: function() {
      var self = this;
      var search_string = this.input.toLowerCase();

      // apply filter
      var array = this.search_filter_array(this.items, search_string);

      return array.slice(0, 10).map(a => a.id);
    },

    number_of_search_results: function() {
      return this.search_list_of_workorders.length
    },

    display_results_buttons: function() {
      return this.number_of_search_results > 0
    },
  },

  methods: {
    search_filter_array: function(array, search_string) {

      return array.filter(function(el) {
        var id_filter = el.id.toString().includes(search_string);
        return id_filter;
      });
    },
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">

  <button type="button" v-show="display_results_buttons">
        Back
  </button>
  <div v-show="display_results_buttons">({{ number_of_search_results }})</div>
  <input placeholder="Search" type="text" list="searchDropDown" id="searchInput" name="selectEventInput" v-model="input" />

  <datalist id="searchDropDown">
     <option v-for="(item, index) in search_list_of_workorders" :value="item" :key="`optionEvents_${index}`" >
     </option>
  </datalist>
  <button type="button" v-show="display_results_buttons">
        Forward
  </button>
</div>

【讨论】：