DOM-Vue.jsの反復コンポーネントをターゲットできません

Question

構文エラーは許されません。完全に動作しますが、コピーする際にエラーが発生している可能性があります。

問題：私は で3回繰り返されたコンポーネント 'dropdown'を持っています。v-for = '（項目、インデックス）'は3つのオブジェクトを持つ配列 です。 '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(); 
    } 
    } 
}) 

t1; dr;どのようにターゲットを設定するのですか？

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次のとおりです。ここで

は、コードがあります。

使用動的なクラス：私はまた、代わりにdocument.getElementByIdの、vue wayで動的にクラスを追加/削除する方法を変更しました。次の行に注目してください：

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

nodisplayクラスがdropDownClosed変数がtrueになりますときに適用されると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を参照してください。 。