当没有结果时，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. 这将完美解决您的问题！

主要区别：

• v-if：如果表达式通过，则仅将元素渲染到 DOM。

• v-show：将所有元素渲染到 DOM，然后在表达式失败时使用 CSS 显示属性隐藏元素。

用例：

• 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>