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组件中的定义相同，calculated属性也不会重新触发。另外，我在v-for中有一个NotesEditor也没有变化。

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

编辑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()

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

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

1 个答案: