vue.js - 移动了对象内部的一些属性，相关事件不再触发

Question

编辑：问题是由于问题中没有提到的另一个数据。我不想删除它，但也不想让它保持打开状态。如果您是版主，请关闭此问题。

最初stageStat看起来像：

  data() {
    return {
     stageStat: {
       total: 0,
       success: 0,
       fail: 0,
     };
   }
  }

我在里面移动了一些属性testCount，使它看起来更干净（stageStat有很多属性——为了清楚起见，我在这个例子中删除了这些属性——这感觉是个好主意）。让我添加基于 graphQL 和 Apollo 的查询部分，但我已经检查了值是否正确存储，stageStat所以它不应该是问题。

  data() {
    return {
     stageStat: { 
       testCount: {
         total: 0,
         success: 0,
         fail: 0,
       },
     };
   }
  }

  ...

  query stageStat($id: ID!) {
    stageStat(id: $id) {...}
  },
    result(res) {
      this.isLoadingStats = false;
      if (!res.data || !res.data.stageStat) {
        this.stageStat = {
          testCount: {
            total: 0,
            success: 0,
            failed: 0,
          },
        };
        return;
      }
      this.stageStat = res.data.stageStat; // will have testCount object
      // 2:HERE
    },
  },

我更改了用于stageStat与此更改兼容的部分

<div v-if="stageStat.testCount && stageStat.testCount.total"> // 1:HERE
      <div
        class="success"
        @mouseover="setToolTip($event, 'success')"
        @mouseout="hideToolTip($event)"></div>
      <div
        class="failed"
        @mouseover="setToolTip($event, `failed`)"
        @mouseout="hideToolTip($event)"></div>
</div>

问题 我发现mouseover和mouseout事件没有链接到div元素。我试过改成v-if但v-show没有效果。我也没有看到错误消息。

info1 另一件要补充的事情是，如果我将我突出显示的部分更改1:HERE为

<div v-if="stageStat.testCount.total">

它一直在抱怨vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'total' of undefined，好像stageStat.testCount没有初始化。

info2 我也尝试过在我标记的行上明确设置值，2:HERE但它也不起作用。

        this.$set(this.stageStat.testCount, 'success', res.data.stageStat.success);
        this.$set(this.stageStat.testCount, 'cancelled', res.data.stageStat.cancelled);

有人注意到什么吗？

标签： vue.js