计算函数在一个组件中运行，但不在另一个组件中运行

Question

我在一个页面上有多个组件，我发现对父对象的更新会反映在其中一个组件中，而不会反映在另一个组件中。

主页PatientEditor.vue 包含以下组件：

                <notes-editor v-model="pt" />
                <chart-completion v-model="pt" arrange="horiz" />

并且有这个脚本：

module.exports = {
  props: ["pt"]
};

所以，pt 对象在父对象中，它作为v-model 传递给多个组件

组件ChartCompletion.vue 运行良好。里面有这些。

module.exports = {
  props: ["value", "arrange"],

  computed: {
    completed_notes: function() {
      return this.value.notes.filter(function(note) {
        return note.signed_at;
      }).length;
    },

不过，我的问题孩子是 NotesEditor.vue 模板，其中包含以下内容：

module.exports = {
  props: ["value"],

  computed: {
    completed_notes: function() {
      return this.value.notes.filter(function(note) {
        return note.signed_at;
      }).length;
    }
  },

不确定它是否重要，但 notes 对象是从另一个组件中的 ajax 调用填充的，如下所示：

      this.value.notes.splice(0, this.value.notes.length, ...response.body.notes);
      this.$emit("input", this.value);

太好了，问题来了。

当this.value.notes 更新时，结果会在ChartCompletion 组件中看到，但在NotesEditor 组件中看不到。当我在 chrome 中使用 Vue 调试器时，我可以看到 notes 对象已更改，但由于某种原因，计算属性不会重新触发，即使它在 ChartCompletion 组件中具有相同的定义。另外，我在NotesEditor 中有一个v-for，它也不会改变。

调试此问题的最佳方法是什么？

EDIT 1 -- 包括NotesEditor 组件

<template>
  <span>
    <table class="table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Status</th>
          <th>Audio</th>
          <th>Text</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="n in value.notes" :key="n.id">
          <th>{{n.created_at}}</th>
          <td>{{n.note_status_id}}</td>
          <td>
            <span v-if="n.audio_length > 0">
              <audio controls="controls" preload="none">
                <source :src="audioURL(n.id)" type="audio/webm"> Your browser does not support the audio element.
              </audio>
              ({{n.audio_length}}s)
            </span>
            <span v-else>
              None
            </span>
          </td>
          <td>
            <span v-if="n.note_text">
              <button data-toggle="tooltip" :title="n.note_text" class="btn btn-outline-primary btn-sm" @click.prevent="openChartEditor(n.id)">
                <span class="glyphicon glyphicon-edit"></span> Edit Note ({{ n.note_text.length }} chars)
              </button>
            </span>
            <span v-else>
              <button class="btn btn-primary btn-sm" @click.prevent="openChartEditor(n.id)">
                <span class="glyphicon glyphicon-pencil"></span> Create Note
              </button>
            </span>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <record v-model="value" />
          </td>
          <td>
            <button class="btn btn-primary" @click.prevent="openChartEditor(0)">
              <span class="glyphicon glyphicon-pencil"></span> Create Note
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </span>
</template>


<script>
module.exports = {
  props: ["value"],

  data: function() {
    return {
      sendFaxWorking: false
    };
  },

  computed: {
    completed_notes: function() {
      return this.value.notes.filter(function(note) {
        return note.signed_at;
      }).length;
    }
  },

  methods: {
    audioURL: function(id) {
      return "/notes/getAudio/" + id;
    },

    openChartEditor: function(id) {
      this.$root.$emit("showEditor", id);
    }
  }
};
</script>

<style>
audio {
  vertical-align: middle;
  border: 0;
  margin: 0;
}
</style>

Answer 1

我认为这不是一个好的答案，但它确实有效。我添加了一个调用 $forceUpdate()

的 watcher 函数

  mounted: function() {
    this.$watch("value.notes", this.$forceUpdate);
  },