vue 中 input选中和v-show的问题

Question

一、

1，vue中使用input选中功能，单击选中无任何问题。
   但设置“全选”，点击全选时候，input标签瞬间勾中，又瞬间取消打钩，
   下方“全选”按钮为点击时 用v-show 隐藏，然后使用 v-show显示“取消全选”按钮，
   全选隐藏瞬间 ，input 也会跟着隐藏
          

二、

详见此图

三、

代码

1、<template>

<div  class="del_button_div clearfix">
    <p v-show="AllChoiceYes" @click="take_All_SKID" class="AllChoice">全选</p> 
    <p v-show="AllChoiceNo" @click="no_take_All_SKID" class="no_AllChoice">取消全选</p>
    <p @click="delshow" class="del_button"> 删除</p>
</div>

2、<script>
data(){

return{
    AllChoiceYes:true,
      AllChoiceNo:false,
      selectArr: [],
}

},
methods:{

//全部选中
take_All_SKID(){
    $(".choice").prop("checked", true);
    var AllReadlistDel = '';
    //console.log(this.records.length)
    
    //$(".yesorno_svg").prop("checked", true);
    for (var i = 0; i < this.records.length; i++) {
         //console.log(this.records[i].GoodsList[i].SKID)
        this.records[i].GoodsList.map(item => {
            //console.log(item.SKID)
            AllReadlistDel += item.SKID + ','; 
            //console.log(this.AllReadlistDel); 
        });
    };
    this.AllReadlistDel = AllReadlistDel.substr(0,AllReadlistDel.length - 1);
    this.AllChoiceYes = false;
    this.AllChoiceNo = true;
    console.log(this.AllReadlistDel)
},
//取消全选
no_take_All_SKID(){
    $(".choice").prop("checked", false);
    this.selectArr = [];
    this.AllChoiceNo = false;
    this.AllChoiceYes = true;
},

},

Answer 1

$(".choice").prop("checked", true);

这操作也是骚. 你先用 jquery 手动操作了 dom, 此时 vue 又因为 AllChoiceYes 和 AllChoiceNo 的改变触发了重新渲染, 又重新渲染了一个没有被选中的 input.

解决方案:
请用数据驱动 ui. 不要直接操作 dom 了.

Answer 2

不要有jq
$(".choice").prop("checked", true);