Question

请原谅任何语法错误，它完美无缺，但我可能会在复制时出错。

问题：我有一个组件，'下拉'，重复三次搜索中的v-for ='（项目，索引）这是一个包含三个对象的数组。下面的'filterInput'方法，for循环和if语句确实按预期工作，但是，我不知道如何定位匹配search [i]的'dropdown'元素。当search [i] .text与输入不匹配时，我需要删除DOM中的search [i]元素。

<div id='app'>
  <input type='text' placeholder='Start typing here...' v-model='input'
    @click='drop()' v-on:blur='close()'>
  <ul id="dropdown" class='nodisplay'>
    <dropdown v-for='(item, index) in search' v-bind:item='item' v-   
      bind:index='index'></dropdown>
  </ul>
</div>

Vue.component('dropdown', {
  props: ['item', 'index'],
  template: `<li><a href="#"> {{item.text}}</a></li>`
})

var app = new Vue({
  el: '#app',
  data: {
  input: '', //reactive
  search: [
    {id: 1, text: 'Jacob'},
    {id: 2, text: 'Jeff'},
    {id: 3, text: 'Tom'}
  ]
  },
  methods: {
    drop: function() {
      let dropdown = document.getElementById('dropdown');
      dropdown.classList.toggle('nodisplay');
    },
    close: function() {
      let dropdown = document.getElementById('dropdown');
      dropdown.classList.toggle('nodisplay');
      document.querySelector('input').value = '';
    },
    filterInput: function(index) {
      //dropdown items in console: app.search[index].text = 'xyz'
      for (let i = 0; i < this.search.length; i++) {
        if (!(this.search[i].text.startsWith(this.input))) {
          //hide or remove this current search element from dropdown
        }
      }
    }
  },
  watch: {
    input: function() {
      this.filterInput();
    }
  }
})

TL;博士;我如何定位

Answer 1

您正在寻找的是如何进行亲子沟通，我今天已经回答here。

您需要$emit子组件中的事件并设置输入字段中使用的值，就像documentation中的示例一样。

以下是代码：

<强> HTML

<div id='app'>
  <input type='text' placeholder='Start typing here...' v-model='input'
    @click='drop()' >
  <ul id="dropdown" :class="{'nodisplay': dropDownClosed}">
    <dropdown v-for='(item, index) in search' v-bind:item='item' v-   
      bind:index='index' v-on:getdropdowninput="getdropdowninput"></dropdown>
  </ul>
</div>

<强> JS

dropdown = Vue.component('dropdown', {
  props: ['item', 'index'],
  template: `<div><li ><a @click="selectval(item.text)" href="#"> {{item.text}}</a></li></div>`,
  methods: {
     selectval (value) {
        this.$emit("getdropdowninput", value)
     }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    input: '', //reactive
    dropDownClosed: false,
    search: [
      {id: 1, text: 'Jacob'},
      {id: 2, text: 'Jeff'},
      {id: 3, text: 'Tom'}
    ]
  },
  methods: {
    drop: function() {
      this.dropDownClosed = true
    },
    getdropdowninput: function(value) { 
       this.dropDownClosed = false
       this.input = value;
    },
    filterInput: function(index) {
      //dropdown items in console: app.search[index].text = 'xyz'
      for (let i = 0; i < this.search.length; i++) {
        if (!(this.search[i].text.startsWith(this.input))) {
          //hide or remove this current search element from dropdown
        }
      }
    }
  },
  watch: {
    input: function() {
      this.filterInput();
    }
  }
})

这是工作fiddle。

使用动态类：我还修改了如何在vue way中动态添加/删除类，而不是document.getElementById。请注意以下行：

<ul id="dropdown" :class="{'nodisplay': dropDownClosed}">

如果nodisplay变量为true，则会应用

dropDownClosed类，当dropDownClosed变量为false时，它将被删除。

如何过滤：

要进行过滤，您可以在v-for中使用computed属性，只要输入更改，您就可以过滤search数组，如下所示

  computed: {
     filteredInput: function(){
       if(this.input === '' || !this.input){
          return this.search
       } else {
          var self = this
          return this.search.filter(
             function( s ) {
             return s.text.indexOf( self.input ) !== -1; }
          );
       }       
     }

请参阅工作小提琴here。

无法在DOM中重复组件 - Vue.js

1 个答案: