[Try to record] Click the button button and enter the button value into the input box

Tip: After the article is written, the table of contents can be automatically generated. For how to generate it, please refer to the help document on the right.

---

As a newbie who has just come into contact with front-end development, I record the functional development ideas and requirements that I feel I need to note down during development
: click the button and pass the value of the button into the input. The button style changes (clicked); click the button again and the button will be The button value is cleared from the input and the button style is restored (not clicked)

Rough code (only part written, record ideas) (single button):

 <!-- HTML部分 -->
 <!-- 按钮 -->
        <a-button class="commentLabelBtn" type="primary" :class="{active: isActive1}" @click="commentLabel1($event)">
               {
    
    {
    
     value }}
        </a-button>
        <a-input v-model="form.comment">
               {
    
    {
    
     form.comment }}
        </a-input>
 <!-- script部分(ts) -->
 		isActive1 = false;


		commentLabel1(event) {
    
    
        if (this.isActive1 == false) {
    
    
            this.isActive1 = true;
            this.form.comment += event.srcElement.innerText + ';';
        } else {
    
    
            let test = this.form.comment.replace('value', ''); // 需要直接写 value 的值，不能写变量名
            this.form.comment = test;
            this.isActive1 = false;
        }
    }
    
 <!-- CSS部分 -->
 .commentLabelBtn {
    
    
        width: auto;
        height: 28px;
        margin: 8px 8px 8px 0;
        background: #eaeff5;
        color: #000000 !important;
        border-radius: 50px;
        border: none;
    }
.active {
    
    
        background-color: #435bf7;
        color: #fff !important;
    }

Implement effects (multiple buttons)

If you have any questions, we can discuss them together.