У меня есть родитель и ребенок.В родительскую пропускаю 3 переменные как реквизит ребенку.В «Ребенке» я использую watch () для поиска возможных изменений.Когда дочерний элемент создается в первый раз, часы работают должным образом, но когда данные из реквизита обновляются, DOM дочернего элемента не обновляется.Функция наблюдения, которая ищет изменение данных переменной, вообще не работает.
Вот мой код.Это немного длинно, поэтому, пожалуйста, имейте это в виду.
Parentcomponent.vue
<template>
<div>
<button type="button" v-on:click="LoadCatalog()">Click me!! </button>
<div v-if="displayCategoryList" class="row">
<h3>Select Category Men</h3>
<select v-model="menCategory" v-on:change="passDataToChild()">
<option v-for="item in categoriesfordisplay.men" v-bind:key="item">
{{ item }}
</option>
</select>
<h3>Select Category Women</h3>
<select v-model="WomenCategory" v-on:change="passDataToChild()">
<option v-for="item in categoriesfordisplay.women" v-bind:key="item">
{{ item }}
</option>
</select>
</div>
<div v-if="displayData" class="row">
<div v-for="item in data_to_show_on_mainpage" v-bind:key="item" >
<button v-on:click="newfunction(item.cat,item.gender)" >
<img v-bind:src="item.data.image"> </img>
<p >{{ item.cat }}</p>
</button>
</div>
</div>
<category-items v-if="displayCategoryData" v-bind:gender="gender" v-bind:catsgory="catsgory" v-bind:catlog="catlog" ></category-items>
</div>
</template>
<script>
import axios from 'axios'
import CategoryItems from './CategoryItems'
export default {
name: 'GetCategoryItemsAndDisplayOne',
props: ['categoriesfordisplay','ismainpage', 'catalogselected'],
components:{
CategoryItems,
},
data(){
return {
IsMainPage_1 : "",
data_to_show_on_mainpage : [],
cat :[],
displayData : true,
menCategory : "",
WomenCategory : "",
displayCategoryList: true,
displayCategoryData : false,
CategoryFromImage : "",
//dataSentToChild : {}
gender : "",
catsgory : "",
catlog : ""
}
},
methods:{
passDataToChild(){
if(this.menCategory != ""){
this.catsgory = this.menCategory
this.gender = "men"
this.catlog = this.catalogselected
this.menCategory = ""
}else if(this.WomenCategory != ""){
this.catsgory = this.WomenCategory
this.gender = "women"
this.catlog = this.catalogselected
this.WomenCategory = ""
}
this.displayData = false
this.displayCategoryData = true
},
changevalue(){
this.data_to_show_on_mainpage = []
},
CatlogService(catlog_name,category,gender,mainpage){
let url = "http://localhost:5000/xyz/" + (this.catalogselected).replace(/'/g,"%27") +"/api/"+ (gender) + "/catalogvis/" + (category) +"/items"
axios.get(encodeURI(url)).then((resp)=>{
var jsonData = {"data": resp.data.response.Results.results[0] , "cat": category , "gender" : gender}
)
this.data_to_show_on_mainpage.push(jsonData)
})
.catch(err => {
console.log("we got an error the url is " + url)
console.log(err);
})
},
GetItemsToShowonMainPage(){
this.changevalue()
if(this.categoriesfordisplay.men_for_display.length>0){
for(let i =0;i<this.categoriesfordisplay.men_for_display.length;i++){
let category = this.categoriesfordisplay.men_for_display[i].replace(/"/g,"%27");
console.log(category)
this.CatlogService(this.catalogselected,category,'men',this.ismainpage)
}
}
if(this.categoriesfordisplay.women_for_display.length>0){
for(let i = 0;i<this.categoriesfordisplay.women_for_display.length;i++){
let category = this.categoriesfordisplay.women_for_display[i].replace(/"/g,"");
this.CatlogService(this.catalogselected,category,'women',this.ismainpage)
}
}
},
LoadCatalog(){
this.displayCategoryData = false
this.GetItemsToShowonMainPage()
this.displayData = true
this.displayCategoryList = true
},
newfunction(Cats,gender){
this.displayCategoryData = true
this.displayData = false
this.catsgory = Cats
this.gender = gender
this.catlog = this.catalogselected
}
},
created(){
this.GetItemsToShowonMainPage()
}
}
</script>
<style>
</style>
Дочерний компонент CategoryItems.vue ниже
<template>
<div>
<h4>{{ genders }}</h4>
<h4>{{ category }}</h4>
<h4>{{ catalogue }}</h4>
</div>
</template>
<script>
export default{
name : 'CategoryItems',
props : ['gender','catsgory','catlog'],
data(){
return {
genders : "",
category : "",
catalogue : "",
}
},
watch : {
category : function(){
this.GetProducts()
}
},
methods:{
GetProducts(){
this.genders = this.gender
this.category = this.catsgory
this.catalogue = this.catlog
}
},
created(){
this.genders = this.gender
this.category = this.catsgory
this.catalogue = this.catlog
}
}
</script>
<style>
</style>
Как видно, переменная category в дочернем элементе изменяет функцию GetProducts должен бежать, но этого не происходит.Он выполняется только при создании дочернего компонента.
Где я ошибаюсь в своей логике.Спасибо