Vue.js配列の内容を更新する

Question

私はデータのフィードオブジェクトに割り当てられた配列feedListBoxを持っています。 feedListBox配列を更新すると、Vue.jsはそれを検出しません。したがって、私はfixFeedArrayメソッドをscript.jsファイルmyApp.fixFeedArray()に使用しています。それは本当にうまく動作しますが、私はスクリプトファイル内の関数を使用せずにそれを行う別の方法があるのだろうかと思います。私は自動的に意味します。ここで

var myApp = new Vue({ 
    el: '#my-App', 
    data: { 
     feeds: feedListBox, 
    }, 
    methods: { 
     fixFeedArray: function fixFeedArray() { 
      this.feeds = feedListBox; 
     } 
    }  
}); 

は、スクリプトファイルにfeedListBox配列の値を変更する機能

function searchByCategory() { 
     var category = $("#categoryBox").val(); 
     var searchedCategories = feedArray.filter(function (item) { 
      return item.category.includes(category); 
     }); 
     feedListBox = searchedCategories; 

     myApp.fixFeedArray(); 
    } 

Answer 1

まずオフになって、私は個人的にjQueryを捨てるでしょう。ここでは、新しいデータをVueのArrayにプッシュして反応させて再レンダリングする方法の簡単な例を示します。ユーティリティ関数ではない場合は、メソッドオブジェクトにデータを操作するすべての関数を保持することをお勧めします。

new Vue({ 
 
    el: "#main", 
 
    data: { 
 
    error: null, 
 
    newText: '', 
 
    newValue: '', 
 
    categories: [{ 
 
     text: "Shapes", 
 
     value: "shapes" 
 
     }, 
 
     { 
 
     text: "Colors", 
 
     value: "colors" 
 
     }, 
 
     { 
 
     text: "Sizes", 
 
     value: "sizes" 
 
     }, 
 
    ], 
 
    }, 
 
    methods: { 
 
    test: function() { 
 
     if (this.newText === '' || 
 
     this.newValue === '') { 
 
     return this.error = 'Please fill out the form!' 
 
     } 
 
     this.categories.push({ 
 
     text: this.newText, 
 
     value: this.newValue, 
 
     }); 
 
     return this.clear(); 
 
    }, 
 
    clear: function() { 
 
     this.newText = ''; 
 
     this.newValue = ''; 
 
     this.error = ''; 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 

 
<div id="main"> 
 
    {{ error }} 
 
    <ul> 
 
    <li v-for="(item, index) in categories"> 
 
     {{ item.text }} 
 
    </li> 
 
    </ul> 
 
    <label>Text</label> 
 
    <input v-model="newText" type="text" /> 
 
    <label>Value</label> 
 
    <input v-model="newValue" type="text" /> 
 
    <button v-on:click="test">Add to Array</button> 
 
</div>