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

醉の虾2024-11-23 18:19

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

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

1、html渲染部分

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 代码

javascript 复制代码

const { createApp, ref,watch,reactive, onMounted } = Vue;
    createApp({
        setup() {
            //定义响应式变量
           let list=ref([]);
           
          //获取后台数据，赋值list
          onMounted(() => {
                console.log('初始化');
                axios.get('/api/getList')
                    .then(function(response){
                        list.value=response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            });

            //修改name
            function editName(idx)
            {
               list.value[idx].name='new Name';
            }


           //返回变量
           return {list,editName}
          }
     }).mount('#app');

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