Vue: невозможно установить вычисляемое свойство - PullRequest
Новая
       22

Vue: невозможно установить вычисляемое свойство

0 голосов
/ 11 февраля 2020

Мне нужна помощь с вычисляемыми свойствами, а ajax в vue.

"filterFactories" - это список фабрик. Вычисленное свойство «filterFactories» создает этот список фабрик.

Теперь я хочу новую функцию: у меня есть кнопка для запроса ajax, которая получает несколько новых фабрик. Я хочу установить вычисляемое свойство "filterFactories" после запроса ajax. К сожалению, ничего не происходит. это не имеет значения: 1. this.filterFactories = response; или 2. window.filterFactories = response; В обоих случаях - ничего не произошло

Возможно ли обновить "filterFactories" после успешного ajax запроса?

Я добавил больший код, отсекаемый 

<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>

1 Ответ

0 голосов
/ 11 февраля 2020

Vue использует некоторые маги c для вычисляемых свойств: он сканирует код функции и автоматически создает наблюдатели для свойств, которые он находит в коде. Это хорошо работает в простых ситуациях, но много раз мне не удавалось с циклами, отображением, уменьшением и т. Д. c.

При необходимости я использую несколько обходных путей, что проще всего понять так: создать искусственное свойство на который вы ссылаетесь в вычисляемой подпорке, а затем обновляете по мере необходимости: 

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" ;)

...