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

Posted 2023-02-22

【中文标题】基于对象属性对数组元素的反应

【英文标题】：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) 将两者绑定（这最终是我想要的），但这没有用。

【参考方案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>