Reactivity to an array element based on object property - arrays

Question

I am getting student details in summary form, just name and surname. I am passing the response to an array in data: data: function(){ return{ studsSummary:[] }}. I am using this stud array in a v-for to create the students dynamically like this: <div>{{studSummary.name}}</div>.
On selecting a student, I am loading the student details in detailed form beneath the summary area. The detailed details have an object inside data with corresponding fields. Let's say just name and surname only for my question. So in data I also have studDetailed : { name: '', surname: ''}. Further more these are now bound to a textfield through v-model='studDetailed.name'. Now since studsSummary[0].name = studDetailed.name I want the former to react to the latter and have any changes reflect in the summary also as I type in the textfield.
What do I have to change please to make this work? I have then tried this.$set(this.studsSummary[0], 'name', this.studDetailed.name) to bind the two (it's ultimately what I want), but that didn't work.

Answer 1

If I understand you correctly, try like following snippet:
(update studsSummary on #input event)
new Vue({
el: '#demo',
data(){
return {
studsSummary: [{id: 1, name: 'aaa', surname: 'AAA'}, {id:2, name: 'bbb', surname: 'BBB'}, {id:3, name: 'ccc', surname: 'CCC'}],
studDetailed: {id: null, name: '', surname: ''}
}
},
methods:{
selectStud(stud) {
this.studDetailed = stud
},
setStud() {
this.studsSummary = this.studsSummary.map((item) =>
item.id !== this.studDetailed.id
? item
: { ...item, ...this.studDetailed }
)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<ul>
<li v-for="(studSummary, i) in studsSummary" :key="i">
<div #click="selectStud(studSummary)">{{studSummary.name}} - {{studSummary.surname}}</div>
</li>
</ul>
<div v-if="studDetailed.id">
<input type="text" v-model="studDetailed.name" #input="setStud" />
<input type="text" v-model="studDetailed.surname" #input="setStud" />
</div>
</div>