Vue3 使用v-for 渲染列表数据后更新

通过axios获取后台数组对象，使用v-for渲染，并实现修改

*本文不使用vue脚手架编写

1、html渲染部分

<ul v-for="(item,index) in sklist" :key="index"><li>{{item.name}},{{item.age}}</li><li><button @click="editName(index)">修改Name</button></li>
</ul>

2、vue 代码

const { createApp, ref,watch,reactive, onMounted } = Vue;createApp({setup() {//定义响应式变量let list=ref([]);//获取后台数据，赋值listonMounted(() => {console.log('初始化');axios.get('/api/getList').then(function(response){list.value=response.data;}).catch(function (error) {console.log(error);});});//修改namefunction editName(idx){list.value[idx].name='new Name';}//返回变量return {list,editName}}}).mount('#app');

总结：在渲染时，对需要修改的数据，可以使用index编号传递给函数，这样函数可以通过index定位数据的位置，然后进而处理对象的具体属性值。