Question

我有一个子组件，它从父组件接收道具。单击按钮后，我添加了一个事件以更新父组件中的prop。但是子组件无法检测到道具更改。

近似代码：

父组件：

<template>
  <table>
    <Student v-for="(student, index) in students"
      :key="index"
      :student="student"
      :attendance="attendance[student.id]"
      @attended-clicked="changeAttendance"
    ></student>
  </table>
</template>

<script>
  export default {
    data() {
      return {
        students: [
          {id: 1, name: 'Pepito'},
          {id: 2, name: 'Sue'},
        ],
        attendance: {
          1: {attended: true},
          2: {attended: false},
        }
      }
    },
    methods: {
      changeAttendance(studentId) {
        this.attendance[studentId].attended = !this.attendance[studentId].attended;
      }
    }
  }
</script>

子组件：

<template>
  <tr>
    <td>{{ student.name }}</td>
    <td><v-btn :color="attendance.attended ? 'green' : 'red'"
          @click="$emit('attended-clicked', student.id)"
        >Attended</v-btn>
  </tr>
</template>

<script>
  export default {
    props: ['student', 'attendance']
  }
</script>

我已尝试将代码保持在最小限度，以使您了解我要实现的目标。期望当单击按钮时，attendance.attended将会改变。

使用Vue开发人员工具单击时，我可以验证该值是否正在更改（尽管我必须按“强制刷新”按钮才能看到更改）。但是显然，孩子的观点并没有改变。

我在这里做错了什么，破坏了反应性？

我还尝试过将Vue.set与以下代码结合使用：

methods: {
  changeAttendance(studentId) {
    let attendance = this.attendance[studentId];
    attendance.attended = !attendance.attended;
    Vue.set(this.attendance, studentId, attendance);
  }
}

没有区别。

感谢您对我在做什么的任何见解，谢谢！

Answer 1

根据评论，潜在的问题是attendance设置为{}，这意味着{{3}中的attendance[student.id]对象并不存在或不再被跟踪}}。这是通过问题中提供的Vue.set示例代码来完成的操作。

基本上，我看到两种解决方法：

将出勤率设置为在API返回结果时始终使所有学生ID可用，从而使该对象始终具有一个已经在工作的对象
需要从attendance获取值时，开始跟踪反应性。

由于我不知道API及其调用方式，因此我将为选项2提供答案。所提供的代码几乎可以正常工作，因此只需对Parent组件进行两次更改即可确保学生出勤对象总是被填充，并且将来会被跟踪：

<template>
  <table>
    <!-- :attendance needs an object to work -->
    <Student
      v-for="(student, index) in students"
      :key="index"
      :student="student"
      :attendance="attendance[student.id] || {}"
      @attended-clicked="changeAttendance"
    />
  </table>
</template>

<script>
import Vue from "vue";
import StudentVue from "./Student.vue";

export default {
  data() {
    return {
      students: [{ id: 1, name: "Pepito" }, { id: 2, name: "Sue" }],
      attendance: {}
    };
  },
  methods: {
    changeAttendance(studentId) {
      // make sure to have an object when accessing a student!
      let attendance = this.attendance[studentId] || {};
      attendance.attended = !attendance.attended;
      // start tracking - this will always "reset" the tracking though!
      Vue.set(this.attendance, studentId, attendance);
    }
  },
  components: { Student: StudentVue }
};
</script>

由于this.attendance[student.id] || {}被多次使用，因此我将其封装到getAttendance(studentId) {...}函数中。在此处，Vue.set可用于开始跟踪对象是否不存在，从而使changeAttendance更加简单，并且使|| {}的意图更加清晰。

<template>
  <table>
    <Student
      v-for="(student, index) in students"
      :key="index"
      :student="student"
      :attendance="getAttendance(student.id)"
      @attended-clicked="changeAttendance"
    />
  </table>
</template>

<script>
import Vue from "vue";
import StudentVue from "./Student.vue";

export default {
  data() {
    return {
      students: [{ id: 1, name: "Pepito" }, { id: 2, name: "Sue" }],
      attendance: {}
    };
  },
  methods: {
    changeAttendance(studentId) {
      let attendance = this.getAttendance(studentId);
      attendance.attended = !attendance.attended;
    },
    getAttendance(studentId) {
      const studentAttendance = this.attendance[studentId];
      if (!studentAttendance) {
        Vue.set(this.attendance, studentId, { attended: false });
      }
      return this.attendance[studentId];
    }
  },
  components: { Student: StudentVue }
};
</script>

如果代码库在其他组件中使用this.something[something]，则this.getAttendance可能看起来有点不一致。在这种情况下，最好将所有学生的API调用结果更改为默认值，然后再将其提供给Parent组件。就个人而言，我会尝试使用该选项。而且我会使用this.$set而不是Vue.set来摆脱import Vue行...;）

Vue道具在子组件中未正确更新

1 个答案: