After the el-radio-button is selected, click again to cancel the selection to realize the inverse selection function of the button

After the el-radio-button is selected, click again to cancel the selection to realize the inverse selection function of the button

Click to select, click again to deselect.
The implementation method is as follows:
The first method:

<el-radio-group v-model="pagination.type">
            <el-radio-button @click.native.prevent="clickitem('猫')" label="猫"></el-radio-button>
            <el-radio-button @click.native.prevent="clickitem('狗')" label="狗"></el-radio-button>
            <el-radio-button @click.native.prevent="clickitem('其他宠物')" label="11">其他宠物</el-radio-button>
</el-radio-group>

To bind the button to the event, the implementation method:

//按钮实现反选
        clickitem(e){
    
    
            e == this.pagination.type ? this.pagination.type = '':this.pagination.type = e;
            this.findPage();
        },

The disadvantage of this implementation method is: click to select, click again to cancel the selection, but there is still a border on the button, which is not beautiful.
The second method:
we are adding a button to him, and this button is selected by default.

When we don’t want to select all categories, click all categories again and it will be OK!
code show as below:

	<el-radio-group v-model="pagination.type" @change="findPage()">
            <el-radio-button label="">全部种类：</el-radio-button>
            <el-radio-button label="猫"></el-radio-button>
            <el-radio-button label="狗"></el-radio-button>
            <el-radio-button label="11">其他宠物</el-radio-button>
        </el-radio-group>

@change="findPage(), the method to execute when the button is switched, I am here according to my own needs, because I want to classify the query, set the page query method. And the default is empty, which is defined in the
data :

type:'',

It cannot be achieved by technology, but by logic! end! If you have any questions, please comment and private message!