component, which hides the weight selection box when the checkbox "title only" is selected through v-show, and displays the weight selection box when the checkbox "title + body" is selected
adds the variable isWeight, to the data to change it through the @ click of the checkbox.
but in the application, it is found that the weight selection is always displayed when the initial x is true, and always hidden when the initial x is false.
Why can"t v-if/v-show dynamically respond to changes in data data?
<div class="normal-left-content">
<div class="positionModel">
<el-radio-group v-model="keyPosition">
<el-radio label="TITLE" @click="titleClick("positionKey")"></el-radio>
<el-radio label="TITLE_CONTENT" @click="titleClick("positioCon")" style="margin-left:20px;">+</el-radio>
</el-radio-group>
</div>
</div>
<div v-show="isWeight == true" class="normal-left-content exclude-words">
<div><span class="spantext"></span></div>
<el-radio-group v-model="weightSelect">
<el-radio label="false" @click="weightSet(false)"></el-radio>
<el-radio label="true" style="margin-left:20px;" @click="weightSet(true)"></el-radio>
</el-radio-group>
</div>
<script>
data: function(){
return {
isWeight: false
}
}
methods{
titleClick:function(val){
if(val == "positionKey") {
this.isWeight = false;
} else if(val == "positioCon") {
this.isWeight = true;
}
}
</script>