当没有结果时，Vue 中的输入字段失去焦点

Question

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

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

急于解决这个问题吗？

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>

Answer 1

使用v-show而不是v-if.&nbsp;这将完美解决您的问题！主要区别：v-if：如果表达式通过，则仅将元素渲染到 DOM。v-show：将所有元素渲染到 DOM，然后在表达式失败时使用 CSS 显示属性隐藏元素。用例：v-show：昂贵的初始加载，便宜的切换，v-if：初始加载成本低，切换成本高。在您的情况下，切换是强制性的，并且可能需要多次，因此v-show是更好的解决方案。此外，它不需要重新渲染，也可以解决焦点丢失的问题。new Vue({&nbsp; el: '#app',&nbsp; data: {&nbsp; &nbsp; input: "",&nbsp; &nbsp; items: [{&nbsp; &nbsp; &nbsp; &nbsp; 'id': 123,&nbsp; &nbsp; &nbsp; &nbsp; 'name': 'item1'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; 'id': 124,&nbsp; &nbsp; &nbsp; &nbsp; 'name': 'item2'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; 'id': 128,&nbsp; &nbsp; &nbsp; &nbsp; 'name': 'item3'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; 'id': 237,&nbsp; &nbsp; &nbsp; &nbsp; 'name': 'item4'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; computed: {&nbsp; &nbsp; search_list_of_workorders: function() {&nbsp; &nbsp; &nbsp; var self = this;&nbsp; &nbsp; &nbsp; var search_string = this.input.toLowerCase();&nbsp; &nbsp; &nbsp; // apply filter&nbsp; &nbsp; &nbsp; var array = this.search_filter_array(this.items, search_string);&nbsp; &nbsp; &nbsp; return array.slice(0, 10).map(a => a.id);&nbsp; &nbsp; },&nbsp; &nbsp; number_of_search_results: function() {&nbsp; &nbsp; &nbsp; return this.search_list_of_workorders.length&nbsp; &nbsp; },&nbsp; &nbsp; display_results_buttons: function() {&nbsp; &nbsp; &nbsp; return this.number_of_search_results > 0&nbsp; &nbsp; },&nbsp; },&nbsp; methods: {&nbsp; &nbsp; search_filter_array: function(array, search_string) {&nbsp; &nbsp; &nbsp; return array.filter(function(el) {&nbsp; &nbsp; &nbsp; &nbsp; var id_filter = el.id.toString().includes(search_string);&nbsp; &nbsp; &nbsp; &nbsp; return id_filter;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; }});<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script><div id="app">&nbsp; <button type="button" v-show="display_results_buttons">&nbsp; &nbsp; &nbsp; &nbsp; Back&nbsp; </button>&nbsp; <div v-show="display_results_buttons">({{ number_of_search_results }})</div>&nbsp; <input placeholder="Search" type="text" list="searchDropDown" id="searchInput" name="selectEventInput" v-model="input" />&nbsp; <datalist id="searchDropDown">&nbsp; &nbsp; &nbsp;<option v-for="(item, index) in search_list_of_workorders" :value="item" :key="`optionEvents_${index}`" >&nbsp; &nbsp; &nbsp;</option>&nbsp; </datalist>&nbsp; <button type="button" v-show="display_results_buttons">&nbsp; &nbsp; &nbsp; &nbsp; Forward&nbsp; </button></div>