vue 相关问题

Question

项目场景： 有一个后端给的数据循环出来的列表，里面有一个单选按钮表示“默认/设为默认”，当我点击单选按钮后需要向后端请求改变当前选中的为“默认”并改变对应的文字，现在我的做法是直接再去请求一次列表接口.

使用框架： vue

问题： 除了再去请求一次接口，还能使用什么VUE什么办法解决这个问题？

Answer 1

你的意思是点击之后文字改变？

@click="change($event)"

change(e){
   e.target.innerText = '文字'
}

Answer 2

接着楼上的（下面的语法格式不重要，为了节省时间随便写的）：

template:

<button @click="change($event)">{{ isDefault ? '默认' : '设为默认'}}</button>

data(){
    return {
        isDefault : true
    }
}

created:

var data = 自己想办法设置当前状态或者干脆在data里写true也行。
this.isDefault= data.status;

methods:

change(e){
   
    // 自己写请求，按照请求结果改变isDefault的值就ok了。不用再次请求，如果请求不成功，什么都不做就行。
    axios.post(url,params).then((res)=>{
        if(res.data == true) this.isDefault = !this.isDefault;
    })

}

Answer 3

你这里面应当有两个接口
1.获取列表的接口
2.更改列表某一项的接口
开始的时候通过获取列表接口去拉取所需要展示的列表，当你更改某一项的状态时应当监听这一项的change事件，向后端发送请求更改，成功的话，你在前端修改文字的内容即可，如果不成功就不修改。

Answer 4

点击列表某一行按钮时，发送设置默认接口请求到后台，请求成功后，改变按钮的文字（之前的按钮和当前按钮）