v-if没有在vue中通过单选按钮切换值进行更新

Question

我正在学习Vue，非常感谢帮助，因为我在这里或互联网上找不到关于为什么我的单选按钮不能使用v-if语句的答案，尽管我已经绑定了模型，并且可以看到值的变化。

预期结果：

用户使用单选按钮切换是否具有学位；度包装器"；如果他们选择false，将消失。

实际结果：

用户使用单选按钮切换是否具有学位；度包装器"；如果选择false，则不会消失。

我觉得奇怪的是，我可以看到值的变化和值的绑定？那么为什么v-if切换不显示"；度包装器"；div，当v-model将其更改为false时。

这是我的代码，它是用vue3和typescript中的类编写的。

<template>
<div class="page-wrapper">
<div class="user-data-wrapper">
<h3>Users Data</h3>
<p>first name: {{ userData.firstName }}</p>
<p>last name: {{ userData.secondName }}</p>
<p>age: {{ userData.age }}</p>
<p>location: {{ userData.location }}</p>
<p>date of birth: {{ userData.dateOfBirth }}</p>
<p>has a degree?: {{ userData.hasDegree }}</p>
</div>
<div class="user-update-wrapper">
<h3>Update your user info</h3>
<label for="full-name">Fullname: </label><br>
<input type="text" id="full-name" name="full-name" v-model="fullName"><br>
<label for="full-name">Do you have a degree?: </label><br>
<input type="radio" v-model="userData.hasDegree" value="false">false<br>
<input type="radio" v-model="userData.hasDegree" value="true">true<br>
<div v-if="userData.hasDegree" class="degree-wrapper">
<label for="degree-subject">Degree subject: </label><br>
<select name="degree" id="degree" v-model="userData.degreeSubject">
<option value="maths">maths</option>
<option value="computer-science">computer science</option>
<option value="english">english</option>
<option value="drama">drama</option>
</select>
</div>
</div>
<div class="user-output">
<p>fullname: {{ fullName }}</p>
</div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { Watch } from 'vue-property-decorator';
@Options({
props: {
msg: String
}
})
export default class FakeProfile extends Vue {
msg!: string
private userData = {
firstName: 'John',
secondName: 'Doe',
age: 31,
location: 'Essex',
dateOfBirth: '18/01/1993',
degreeSubject: '',
hasDegree: false
}
/*
Example of a getter and setter for computed properties
*/
get fullName() : string {
return this.userData.firstName + ' ' + this.userData.secondName;
}
/* 
takes in the newValue for fullName we then split it to update the first and
last name.
*/
set fullName(newValue: string) {
let names = newValue.split(' ')
this.userData.firstName = names[0]
this.userData.secondName = names[names.length - 1]
}
/* 
example of a watcher being used to display new selected degree value.
*/
@Watch('userData.degreeSubject')
degreeChanged(newVal: string) : void {
this.userData.degreeSubject = newVal
alert(`degree subject updated to ${newVal}`)
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.user-data-wrapper, .user-update-wrapper {
font-weight: 500;
display: inline-block;
vertical-align: top;
}
.page-wrapper {
margin: auto;
width: 700px;
}
</style>

Answer 1

我构建了一个示例组件来演示功能。使用Vue CLI与Vue 2一起构建，但应适用于Vue 3。

<template>
<div class="radio-toggle-show">
<h4>Radio Toggle Show</h4>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="radio" id="showDiv" :value="true" v-model="displayDiv">
<label class="form-check-label" for="showDiv">Show Div</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="hideDiv" :value="false" v-model="displayDiv">
<label class="form-check-label" for="hideDiv">Hide Div</label>
</div>
</div>
</div>
<div class="row" v-if="displayDiv">
<div class="col-md-6">
<h5>Div that is shown or hidden by radio button</h5>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayDiv: false
}
}
}
</script>