Vue：无法设置计算属性

Question

I need some help with computed properties and ajax in vue.

"filterFactories" is a list of factories. The computed property "filterFactories" creates this list of factories.

Now, I want a new feature: I have a button for an ajax request which get some new factories. I want set the computed property "filterFactories" after an ajax request. Unfortunately nothing happens. it makes no difference: 1. this.filterFactories = response; or 2. window.filterFactories = response; In both cases - nothing happened

Is it possible to update the "filterFactories" after the successfull ajax request?

I have added a larger code snipped

 <div id="app"> <div id="filter"> <div class="row"> <div class="col-md-12"> <div class="input-group"> <span class="input-group-addon">Factory</span> <input type="text" class="form-control" placeholder="Name" aria-describedby="basic-addon1" v-model="searchFactory"> <div class="input-group-btn"> <button class="btn btn-default" type="submit" v-on:click="clearSearchFactory"> <i class="fa fa-times"></i> </button> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-md-6"> <Multiselect v-model="selectedCapabilities" :options="allCapabilities" label="name" placeholder= "Select capabilities" track-by="id" :multiple="true" ></Multiselect> </div> <div class="col-xs-12 col-md-6"> <Multiselect v-model="selectedCountries" :options="allCountries" label="name" placeholder= "Select countries" track-by="code" :multiple="true" ></Multiselect> </div> </div> </div> <!--Modal--> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">{{this.clickedCapability.name}}</h4> </div> <div class="modal-body"> <!--......--> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal" @click="filterProperties">OK</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="row" style="height: 35px; margin: 10px"> <button type="button" class="btn btn-outline-dark" v-for="cap in selectedCapabilities" @click="modalCapClicked(cap)" data-toggle="modal" data-target="#myModal"> {{ cap.name }} <i class="fa fa-cogs"></i></button> </div> <!--Factories--> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2" id="myCard-wrapper" v-for="factory in this.filterFactories"> <!--a list of factories--> </div> </div> </div> <script> window.app = new Vue({ el: '#app', components: { Multiselect: window.VueMultiselect.default }, data() { return { //Capabilities allCapabilities: [], // alle Capabilities aus der Konfiguration die über das Json übermittelt wurden selectedCapabilities: [], // selektierte Capabilities clickedCapability: '', // im Modalfenster geöffnete Capability //Countries selectedCountries: [], // selektierte Countries allCountries: [], // alle Countries aus der Json //Factories searchFactory: '', // Freitext Suchfeld für Fabriken factories: [] // angezeigte Fabriken } }, computed:{ /* Filtert die Fabriken anhand der Kriterien: Suche-Input, Capabilities, Countries */ filterFactories: function(){ var filteredFactories = []; var allFilter = []; allFilter.push(this.filterFactoriesBySearchInput()); allFilter.push(this.filterFactoriesByCaps()); allFilter.push(this.filterFactoriesByCountries()); filteredFactories = allFilter.shift().filter(function(v) { return allFilter.every(function(a) { return a.indexOf(v) !== -1; }); }); return filteredFactories; } }, methods: { /* Filtert anhand der Suchfeld-Eingabe */ filterFactoriesBySearchInput(){ /*filter an return a new list of factories*/ }, /* Filtert anhand der Capabilities */ filterFactoriesByCaps(){ /*filter an return a new list of factories*/ }, /* Filtert anhand der Countries */ filterFactoriesByCountries(){ /*filter an return a new list of factories*/ }, /* Setzt die aktuell im Modal-Fenster geöffnete Capability */ modalCapClicked(cap){ this.clickedCapability = cap; } filterProperties(){ axios.post('.....................................') .then(function (response) { this.factories = response.data.factoriesJson; }) .catch(function (error) { console.log(error); }); }, clearSearchFactory(){ this.searchFactory = []; } }, beforeMount(){ axios.get('.........').then(response => { this.factories = response.data.elementsJson.factories; this.allCapabilities = response.data.elementsJson.config.capabilities; }); axios.get('.......').then(response => { this.allCountries = response.data; }); } }) </script>

Answer 1

Vue uses some magic for computed properties: it scans the function code and will automatically create watchers for the properties it finds within the code. This works well for simple situations but has failed many times for me with loops, map, reduce, etc.

I use multiple workarounds as needed, what is simplest to understand is this: create an artificial property which you reference in the computed prop and then update as needed:

new Vue({
    data: {
        updated: 0,
    },
    computed: {
        myComputed(): {
            // ...
            // just a reference to the prop
            this.updated;
        },
    },
    methods: {
        myAjax(): {
            // ...
            // modifying the prop will trigger update of myComputed
            this.updated++;
        },
    },
});

Of course you should use names more appropriate to the use cases you have, however i have instances where i just called this property "updateDummy" ;)