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>

    <div v-if="fetchingData">

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

    </div>

    <div v-else>

        <!-- The rest of the component -->

    </div>

</template>

这导致了 Vue 的反应性问题，每当我尝试更新组件的某些部分时就会抛出错误。意识到自己的错误后，我将所有内容都包裹在 root 中<div>。这为我解决了这个问题：

<template>

    <div id="fixedComponent">

        <div v-if="fetchingData">

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

        </div>

        <div v-else>

            <!-- The rest of the component -->

        </div>

    </div>

</template>