計算されたデータが変更されたとき、Vueは更新されません

Question

コンテキスト：私は、ワードプレスapiからのタグ、カテゴリの投稿のリストを持っています。私はVueでこれらの投稿を表示し、力価、説明、タグ、およびカテゴリ

問題に基づいて結果をフィルタリングするために、検索ボックスでcomputedを使用して：ユーザーが使用可能なタグのリストをクリックしたときに私はcomputedリストを更新しようとしています。

var vm = new Vue({ 
 
    el: '#blogs',  
 
    data: { 
 
     search: '', 
 
     posts: [], 
 
     filterPosts: [] 
 
    }, 
 
    beforeMount: function() { 
 
     // It should call the data and update 
 
     callData(); 
 
    }, 
 
    computed: { 
 
     filterPosts: { 
 
      get: function() { 
 
       var self = this; 
 
       return self.posts.filter(function(post){ 
 
        var query = self.search.toLowerCase(); 
 
        var title = post.title.toLowerCase(); 
 
        var content = post.content.toLowerCase(); 
 
        var date = post.date.toLowerCase(); 
 
        var categories = ''; 
 
        post.categories.forEach(function(category) { 
 
         categories += category.name.toLowerCase(); 
 
        }); 
 
        var tags = ''; 
 
        post.tags.forEach(function(tag){ 
 
         tags += tag.name.toLowerCase(); 
 
        }); 
 
        return title.indexOf(query) !== -1 ||content.indexOf(query) !== -1 || date.indexOf(query) !== -1 || categories.indexOf(query) !== -1 || tags.indexOf(query) !== -1; 
 
       }); 
 
      }, 
 
      set: function (newValue) { 
 
       console.log(newValue); 
 
       this.filterPosts = Object.assign({}, newValue); 
 
      } 
 
     } 
 
    }, 
 
    methods: { 
 
     filterByTag: function(tag, event) { 
 
      event.preventDefault(); 
 
      var self = this; 
 
      self.filterPosts = self.posts.filter(function(post){ 
 
       var tags = ''; 
 
       post.tags.forEach(function(tag){ 
 
        tags += tag.name.toLowerCase(); 
 
       }); 
 
       return tags.indexOf(tag.toLowerCase()) !== -1; 
 
      }); 
 
     } 
 
    } 
 
}); // Vue instance

私はmethodsに書きましたが、Vueが再レンダリングビューではありませんでした機能に基づいてconsole.log常に出力新しいデータ：私はこのようなcomputedデータのgetとsetを追加します。私は正しい方法をやっていないと思うか、Vueのように思った。あなたはいくつかの洞察力を与えてくれますか？

編集1 完全コードを追加してください。

私はdataでfilterPostsを追加しようとしましたが、私はVueのからこのエラーを受け取っ：

data: { 
    myValue: 'OK' 
    }, 
    computed: { 
    filterPosts: { 
     get: function() { 
     return this.myValue + ' is OK' 
     } 
     set: function (newValue) { 
     this.myValue = newValue 
     } 
    } 
    } 

より：The computed property "filterPosts" is already defined in data.

Answer 1

私は解決策を見つけたので、今Vueで正しい方法かもしれないと思っています。計算されたデータを依存関係のプロパティまたはデータで更新します。私はタグをクリックすると、それはactiveTagを変更して計算filterPost再検査を通知し、再レンダリングされます、dataでactiveTagを追加するよう

set方法は、このような場合のために動作しませんでした。 computedのデータを更新する別の方法があるかどうか教えてください。

var vm = new Vue({ 
 
    el: '#blogs',  
 
    data: { 
 
     search: '', 
 
     posts: [], 
 
     tags: [], 
 
     activeTag: '' 
 
    }, 
 
    beforeMount: function() { 
 
     // It should call the data and update 
 
     callData(); 
 
    }, 
 
    computed: { 
 
     filterPosts: { 
 
      get: function() { 
 
       var self = this; 
 
       return self.posts.filter(function(post){ 
 
        var query = self.search.toLowerCase(); 
 
        var title = post.title.toLowerCase(); 
 
        var content = post.content.toLowerCase(); 
 
        var date = post.date.toLowerCase(); 
 
        var categories = ''; 
 
        post.categories.forEach(function(category) { 
 
         categories += category.name.toLowerCase(); 
 
        }); 
 
        var tags = ''; 
 
        post.tags.forEach(function(tag){ 
 
         tags += tag.name.toLowerCase(); 
 
        }); 
 
        var activeTag = self.activeTag; 
 
        if (activeTag !== '') { 
 
         return tags.indexOf(activeTag.toLowerCase()) !== -1; 
 
        }else{ 
 
         return title.indexOf(query) !== -1 ||content.indexOf(query) !== -1 || date.indexOf(query) !== -1 || categories.indexOf(query) !== -1 || tags.indexOf(query) !== -1; 
 
        }      
 
       }); 
 
      }, 
 
      set: function (newValue) { 
 
       console.log(newValue); 
 
      } 
 
     } 
 
    }, 
 
    methods: { 
 
     filterByTag: function(tag, event) { 
 
      event.preventDefault(); 
 
      var self = this; 
 
      self.activeTag = tag; 
 
     } 
 
    } 
 
}); // Vue instance

Answer 2

のようなものを試してみてください https://vuejs.org/v2/guide/computed.html#Computed-Setter

Answer 3

あなたのセッターは実際には何も設定されていません新しい値だけが記録されます。どこかに保管する必要があります。

data: { 
    value: 'foo', 
}, 
computed: { 
    otherValue: { 
    get() { /*...*/ }, 
    set(newVal) { this.value = newVal }, 
    }, 
}, 

をしかし、これはあなたがVuexを使用する場合は、セッターは、計算された値が得ることを確認するアクションを派遣することができ、間違いなく唯一の可能性ではありません。

たとえば、あなたは、コンポーネントのデータでそれを保存することができます更新しました。コンポーネントは最終的に更新をキャッチし、新しい値を表示します。

computed: { 
    value: { 
    get() { 
     return this.$store.getters.externalData; 
    }, 
    set(newVal) { 
     return this.$store.dispatch('modifyingAction', newVal); 
    }, 
    }, 
}, 

最後に、セッターのデータ変更をトリガーする必要があります。そうしないと、コンポーネントが更新されず、再レンダリングがトリガーされません。

---

EDIT（オリジナルの答えは完全なコードで更新されました）：

答えは、あなたが手動postsを変更せずにリストfilteredPostsを変更しない限り、あなたはgetとset機能を必要としないということですあなたの計算された変数のために。あなたが望む行動はこれでacheivedすることができます。

const vm = new Vue({ 
    data() { 
    return { 
     search: '', 
     posts: [], 
     // these should probably be props, or you won't be able to edit the list easily. The result is the same anyway. 
    }; 
    }, 
    computed: { 
    filteredPosts() { 
     return this.posts.filter(function(post) { 
     ... // do the filtering 
     }); 
    }, 
    }, 
    template: "<ul><li v-for='post in filteredPosts'>{{ post.content }}</li></ul>", 
}); 

この方法であなたはdataでpostsまたはsearch変数を変更した場合、filteredPostsが再計算されます、と再レンダリングトリガされます。