How does vue call the subcomponents and refresh the contents of the subcomponents according to the passed values?
the parent component is a list that displays multiple items, and the child component is a pop-up component, and then the sub-component requests data again according to the id passed from the list, and then changes the data in this pop-up component. Is the watch method used in this pop-up component? Is there any other way? Because if I click on the 10th item, one is added to the sub-component to see the next method, and after seeing the 20th item, the sub-component closes and clicks on the 10th item again, and the sub-component still displays the content of the 20th item. The reason is that watch sees the id, of the 10th item, so it will not be changed. Is there any good way to solve it? Thank you.
the id,id passed in by watch changes and requests to receive data. According to reason, there is no problem.
you must have changed the id locally in the child component. You should give the parent component $emit an event when you click on the next button. Let the parent component change the id passed to the child component
<ul>
<li v-for="(val,index) in list" @click="currIndex=index"></li>
</ul>
<my-com :id="list[currIndex].id" @nextitem="currIndex<list.length-1&&currIndexPP"></my-com>
data :
{
currIndex:'',
list:[
{id:'',name:''},
{id:'',name:''},
{id:'',name:''}
]
}
first of all, I would like to thank my buddy @ DavidWangDong for his help
.
my later solution to the problem was to force a changeable data to be sent to the watch method of the subcomponent, that is, the time. Each time, the subcomponent would send an id, and then the subcomponent would request the data according to a different id, so that the page would look changed, but sometimes the same id would be sent to the subcomponent last time, and the subcomponent had already accepted the same id,. At this point, the method in watch will not be executed, and what I want to do is to make it execute as well, so I do this
<project v-show='isShow' :toProject='messagesContent'></project>
messagesContent id
newTime
var new_time = new Date();
var obj = {
id: id,
time: new_time
}
this.messagesContent = obj
watch watch doSomething
watch: {
toProject: function () {
this.doSomething();
}
},
