Javascript Vue TypeError:无法读取属性'_包装纸'；尝试更新对象属性时的未定义值

我正在尝试使用按钮更新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（）

中记录

a

时，对象会很好地记录到控制台，与预期完全一致。在调试器中逐步完成后，在我尝试更新对象的

is_removed

属性时抛出异常

有人知道我做错了什么吗

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

下面是一个示例

活动

对象：

{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"}

---

只有在第一次单击按钮时才会引发异常。

发布，以防其他人将来遇到此错误

Vue在单个文件组件的

标记中只需要一个根元素。我忘记了这一点，在我的例子中有两个

元素，一次显示一个，有条件地使用v-if：

<template>
    <div v-if="fetchingData">
        <h2>Loading data...</h2>
    </div>
    <div v-else>
        <!-- The rest of the component -->
    </div>
</template>

正在加载数据。。。

这导致Vue的反应性出现问题，每当我试图更新组件的某些部分时，就会抛出错误。在意识到我的错误后，我将所有内容包装在一个根

中。这为我解决了问题：

<template>
    <div id="fixedComponent">
        <div v-if="fetchingData">
            <h2>Loading data...</h2>
        </div>
        <div v-else>
            <!-- The rest of the component -->
        </div>
    </div>
</template>

正在加载数据。。。

发布，以防将来其他人遇到此错误

Vue在单个文件组件的

标记中只需要一个根元素。我忘记了这一点，在我的例子中有两个

元素，一次显示一个，有条件地使用v-if：

<template>
    <div v-if="fetchingData">
        <h2>Loading data...</h2>
    </div>
    <div v-else>
        <!-- The rest of the component -->
    </div>
</template>

正在加载数据。。。

这导致Vue的反应性出现问题，每当我试图更新组件的某些部分时，就会抛出错误。在意识到我的错误后，我将所有内容包装在一个根

中。这为我解决了问题：

<template>
    <div id="fixedComponent">
        <div v-if="fetchingData">
            <h2>Loading data...</h2>
        </div>
        <div v-else>
            <!-- The rest of the component -->
        </div>
    </div>
</template>

正在加载数据。。。

您是否可以包括

活动的数据结构样本

？我添加了一个示例对象您是否可以包括

活动的数据结构样本

？我添加了一个示例对象