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

通过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定位数据的位置,然后进而处理对象的具体属性值。

相关推荐
若梦plus2 分钟前
微前端中微内核&插件化思想的应用
前端
若梦plus4 分钟前
服务化架构中微内核&插件化思想的应用
前端
若梦plus9 分钟前
Electron中微内核&插件化思想的应用
前端·electron
若梦plus10 分钟前
Vue.js中微内核&插件化思想的应用
前端
得物技术1 小时前
Java SPI 机制初探|得物技术
javascript
qq_419854051 小时前
css 发射烟花的动画
前端·css·css3
kngines1 小时前
【Node.js从 0 到 1:入门实战与项目驱动】1.1 什么是 Node.js?(定义、运行环境、与浏览器 JavaScript 的区别)
开发语言·javascript·node.js
一个很帅的帅哥1 小时前
Node.js和Javascript中的async和await
javascript·node.js·async·promise·await
liliangcsdn1 小时前
`npm error code CERT_HAS_EXPIRED‘ 问题
前端·npm·node.js
Rattenking1 小时前
【npm 解决】---- TypeError: crypto.hash is not a function
前端·npm·哈希算法