Vue：无法设置计算属性

Question

我需要一些关于 vue 中计算属性和 ajax 的帮助。

"filterFactories" 是工厂列表。 计算属性“filterFactories”创建了这个工厂列表。

现在，我想要一个新功能： 我有一个用于获取一些新工厂的 ajax 请求的按钮。 我想在 ajax 请求之后设置计算属性“filterFactories”。 不幸的是，什么也没有发生。 没什么区别： 1. this.filterFactories = 响应； 或者 2. window.filterFactories = 响应； 在这两种情况下 - 什么都没发生

ajax请求成功后是否可以更新“filterFactories”？

我添加了一个更大的代码片段

<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 对计算属性使用了一些魔法：它扫描函数代码并自动为它在代码中找到的属性创建观察者。这适用于简单的情况，但在循环、映射、reduce 等方面对我来说失败了很多次。

我根据需要使用了多种解决方法，最容易理解的是：创建一个您在计算属性中引用的人工属性，然后根据需要进行更新：

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++;
        },
    },
});

当然，您应该使用更适合您的用例的名称，但是我有一些实例，我只是将此属性称为“updateDummy”；）