Vue TypeError：尝试更新对象属性时无法读取未定义的属性“_wrapper”

Question

我正在尝试使用按钮来更新 Vue 中对象的属性。该对象由 AJAX 查询返回到数据库，然后isFetching将布尔值设置为false，这会将包含的 div 附加到 DOM。当我尝试更新属性时，出现以下错误：

TypeError: Cannot read property '_wrapper' of undefined

下面是我的 AJAX 代码：

axios.post("/api/myEndpoint", { id: router.currentRoute.query.id })

    .then((response) => {

        this.activities = response.data.activities;

        this.isFetching = false;

    })

    .catch((errors) => {    

        console.log(errors);

        router.push("/");    

    });          

这是我的 HTML：

<div v-if="isFetching">

  <h2>Loading data...</h2>

</div>

<div v-else>

    <div class="row no-gutters">

        <div class="col">

            <div class="d-flex flex-row justify-content-center">

                <h4>Activities</h4>

            </div>

            <div class="custom-card p-2">

                <div class="row no-gutters pb-4" v-for="(activity, index) in activities" 

                 :key="activity.stage_id">

                    <button v-if="!activity.is_removed" class="btn custom-btn" :class="{'hov': 

                     index == 0}" :disabled="index != 0" 

                     @click="markRemoved(activity)">Remove</button>

                </div>

            </div>

        </div>

    </div>

</div>

最后，这是markRemoved()由按钮的单击侦听器调用的：

markRemoved(a) {

  a.is_removed = true;

}

当我尝试登录时，a对象markRemoved()会很好地记录到控制台，完全符合预期。is_removed在调试器中单步调试它后，在我尝试更新对象的属性时抛出异常。

有谁知道我在这里做错了什么？

注意：我传递给AJAX查询的id是Vue Router的查询参数。这也设置正确并按预期通过。

这是一个示例activity对象：

{date_time_due: "2020-12-09T11:43:07.740Z"

 date_time_reached_stage: "2020-12-02T11:43:07.740Z"

 is_complete: true

 is_removed: false

 selected_option: "Some text"

 stage_id: 1

 stage_name: "Some text"}

仅在第一次单击按钮时引发异常。

Answer 1

发布以防其他人将来遇到此错误。Vue 只需要单文件组件标签中的一个根元素<template>。我已经忘记了这一点，在我的例子中，有两个<div>元素，一次显示一个，有条件地使用 v-if：<template>&nbsp; &nbsp; <div v-if="fetchingData">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Loading data...</h2>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div v-else>&nbsp; &nbsp; &nbsp; &nbsp; <!-- The rest of the component -->&nbsp; &nbsp; </div></template>这导致了 Vue 的反应性问题，每当我尝试更新组件的某些部分时就会抛出错误。意识到自己的错误后，我将所有内容都包裹在 root 中<div>。这为我解决了这个问题：<template>&nbsp; &nbsp; <div id="fixedComponent">&nbsp; &nbsp; &nbsp; &nbsp; <div v-if="fetchingData">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Loading data...</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div v-else>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- The rest of the component -->&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></template>