javascript - 无法定位 DOM 中的重复组件 - Vue.js

Question

请原谅任何语法错误，它工作得很好，但我可能在复制时出错。

问题:我有一个组件“下拉列表”，它重复了三次 v-for='(item, index) in search' 这是一个包含三个对象的数组。在“filterInput”方法下方，for 循环和 if 语句确实按预期工作，但是，我不知道如何定位与搜索 [i] 匹配的“下拉”元素。当 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 类将在 dropDownClosed 变量为 true 时应用，而在 dropDownClosed 变量为 false 时将被删除。

如何过滤:

要过滤，您可以使用 computed v-for 中的属性，只要输入发生变化，您就可以过滤 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; }
          );
       }       
     }

参见工作 fiddle here .