the user table requires a new list of custom names. After clicking on the custom name of the header, the column enters editable mode.
initially thought about the label and input switching controlled by v-if (code below), but it had no effect. In addition, I also think it"s stupid to do so. Is there any better way?

<table class="table baseTable">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th><span @click="isEdit=isEdit"></span></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in infoList" v-bind:key="index">
            <td>{{index+1+10*(currentPage-1)}}</td>
            <td>{{item.displayName}}</td>
            <td>
                <label v-if="isEdit == false">{{item.customName}}</label>
                <div v-else>
                    <input  v-model="item.customName"/>
                    <button @click="isEdit =isEdit"></button>
                </div>
            </td>
            <td>{{item.userName}}</td>
        </tr>
    </tbody>
</table>