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

Question

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

问题：我有一个组件 'dropdown'，它重复了三次 v-for='(item, index) in search' 这是一个包含三个对象的数组。在下面的 'filterInput' 方法中，for 循环和 if 语句确实按预期工作，但是，我不知道如何定位与搜索 [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

你要找的是如何进行亲子沟通，我今天已经亲自回答了。

你需要$emit an event from the child component and set the value used in input field, just like the example in 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。

使用动态classes：我还修改了如何在vue way中动态add/remove一个class，而不是document.getElementById 个。请注意以下行：

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

nodisplay class 将在 dropDownClosed 变量为真时应用，并在 dropDownClosed 变量为假时移除。

如何筛选:

要过滤，您可以在 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; }
          );
       }       
     }

查看工作 fiddle here。

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

Can't Target repeated component in DOM - Vue.js

javascript

dom

frameworks

vue.js

vuejs2