vue-js切换按钮在数据库查询后不反映新值

Question

大家好，提前感谢大家抽出时间。我是Vue js的新手，我想知道你能不能帮我理解我现在的处境。

我正在尝试使用一个切换按钮来激活或停用某个组件。我已经完成了数据库实现的工作，即更改反映在数据库端和其他地方。

我显然不太了解生命周期或其他内容，但从数据库中读取时，我的"新"切换值没有被拾取：这意味着我将其从"打开"切换到"关闭"，然后在数据库中看到它。当我回到它时，开关显示为"打开"。

我添加了代码片段：

<template>
<div class="asset">
<div class="loading" v-if="loading"></div>
<div class="content" v-else>
<b-row>
<b-col cols="12" style="text-align: right;">
<toggle-button :width="70"
:labels="{checked: 'Active', unchecked: 'Inactive'}"
:value="activeStatus"
@change="handleStatusChange"/>
</b-col>
</b-row>
<h2><span>Asset</span> {{ asset.name }}</h2>
...
</div>

</div>
</template>
<script>

import { ToggleButton } from 'vue-js-toggle-button';
export default {
name: "Asset",
components: {

ToggleButton
},
data() {
return {
assetId: 0,
asset: null,
activeStatus: true,
};
},
methods: {
getActiveStatus() {
this.$http.get(`asset/${this.assetId}/status`)
.then((resp) => {
this.activeStatus = resp.bodyText;

<!-- logging for testing only-->
this.$httpError("Retrieved ActiveStatus: " + this.activeStatus);
})
.catch((resp) => {
this.$httpError("Cannot retrieve active status");
});
},

handleStatusChange(event) {
let newStatus = { activeStatus: event.value };
this.$http.post(`asset/${this.assetId}/status`, newStatus).then(() => {
this.activeStatus = newStatus;
}).catch((resp) => {
this.$httpError('Failed to update activeStatus', resp);
});
},
loadAsset() {
this.loading = true;
this.$http
.get(`asset/${this.assetId}`)
.then((resp) => {
this.asset = resp.body;
})
.catch((resp) => {
this.$httpError("Failed to load asset", resp);
})
.finally(() => {
this.loading = false;
});
},
},
created() {
this.assetId = this.$route.params.id;
this.getActiveStatus();
this.loadAsset();
},
};
</script>
<style scoped>
h2 span {
font-size: 12px;
display: block;
text-transform: uppercase;
}
#dbButton,
#dupButton {
width: 30%;
}
#redspan {
color: red;
}
#copyButton,
#pasteButton {
width: 10%;
}
</style>

Answer 1

只需添加一行"：sync＝true"；切换按钮组件作为属性。

在您的情况下，代码如下所示：

<toggle-button :width="70"
:labels="{checked: 'Active', unchecked: 'Inactive'}"
:value="activeStatus"
:sync=true
@change="handleStatusChange"/>

感谢