我表單中的復選框在編輯模式下未顯示正確的值。我的其他輸入欄位有效，但復選框無效。我在 getNetworkTeams 方法中缺少什么？我被卡住了，有人可以建議我嗎？謝謝你的幫助！
data() {
return {
networkTeam: {
name: "",
isExclusion: true,
},
};
methods: {
getNetworkTeams() {
let url =`/s/teams/network-teams/${this.netId}`;
axios.get(url, this.networkTeam, {
headers: {
Authorization: this.$store.state.user.auth.token,
},
})
.then(response => {
this.networkTeam = response.data;
})
.catch((error) => {
console.log(error);
});
},
},<div class="checkbox">
<label
for="isExclusion"
class="inline"
>
<span class="title">Is exclusion</span>
<b-form-checkbox
id="isExclusion"
v-model="networkTeam.isExclusion"
name="isExclusion"
type="checkbox"
/>
</label>
</div>uj5u.com熱心網友回復：
如果我理解正確的話，你從 api 呼叫中得到數字 1 或 0？然后將其轉換為布林值：
new Vue({
el: '#demo',
data() {
return {
networkTeam: {
name: "",
isExclusion: 1,
},
};
},
methods: {
getNetworkTeams() {
//api call
this.networkTeam.isExclusion === 1
this.setAsBoolean(this.networkTeam.isExclusion)
},
setAsBoolean(num) {
this.networkTeam.isExclusion = num > 0
},
},
mounted() {
this.getNetworkTeams()
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<label
for="isExclusion"
class="inline"
>
<span class="title">Is exclusion</span>
<b-form-checkbox
id="isExclusion"
v-model="networkTeam.isExclusion"
name="isExclusion"
type="checkbox"
/>
</label>
{{networkTeam.isExclusion}}
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/537817.html