基于对象属性对数组元素的反应答案

【问题标题】：Reactivity to an array element based on object property基于对象属性对数组元素的反应
【发布时间】：2021-11-24 10:00:29
【问题描述】：

我正在以摘要形式获取学生详细信息，只有姓名和姓氏。我将响应传递给数据中的数组：data: function(){ return{ studsSummary:[] }}。我在 v-for 中使用这个螺柱数组来动态创建学生，如下所示：<div>{{studSummary.name}}</div>。

在选择学生时，我会在摘要区域下方以详细形式加载学生详细信息。详细的细节在数据中有一个带有相应字段的对象。让我们只为我的问题说名字和姓氏。所以在数据中我也有studDetailed : { name: '', surname: ''}。此外，这些现在通过v-model='studDetailed.name' 绑定到文本字段。现在由于 studsSummary[0].name = studDetailed.name 我希望前者对后者做出反应，并且当我在文本字段中键入时，任何更改也会反映在摘要中。

我需要做些什么改变才能完成这项工作？然后我尝试this.$set(this.studsSummary[0], 'name', this.studDetailed.name) 将两者绑定（这最终是我想要的），但这没有用。

【问题讨论】：

标签： arrays vue.js v-for computed-properties vue-reactivity

【解决方案1】：

如果我理解正确，请尝试如下 sn-p：（在@input 事件上更新studsSummary）

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>

【讨论】：