v-for循环的时候,怎么一起提交每个item更改的数据,如下图和代码

问题

我想要把输入框里的值,修改后,再一起提交给后台,但是报错了

https://img2.mukewang.com/5c8f3f8d0001db3703070242.jpg

<template>
    <div>
        <ul>
            <li v-for="(item,index) in data" :key="item.id">
                <span>{{item.id}}</span>---
                <input type="text" :value="item.number" v-on:change="changeFn()">
            </li>
            <button @click="btn()">btn</button>
        </ul>
    </div>

</template>
<script>
export default {
    data() {
        return {
            data: [
                { id: 1, number: 10 },
                { id: 2, number: 20 },
                { id: 3, number: 30 }
            ],
        };
    },
    methods:{
        btn(index){
           let item = this.data.forEach(item => {
               return item
           })
            axios.post('http://localhost:3000/examUpdateScan',{
                number:item.number
            })
            .then(response => {
                console.log(response)
            })
            .catch(error => {
                console.log(error)
            })
        }
    }
};
</script>
qq_遁去的一_1
浏览 461回答 3
3回答

守着星空守着你

input 没有双向绑定<input type="text" v-model="item.number" v-on:change="changeFn()">

沧海一幻觉

刚才说错了,换成map,给你个小demo。 data= [ { id: 1, number: 10 }, { id: 2, number: 20 }, { id: 3, number: 30 } ], item = data.map(item => { return item.number }) console.log(item)

紫衣仙女

let item = this.data.forEach(item => { return item }) 这段代码 首先贴一下 forEachforEachforEach返回值 undefined 你这样写item为undefined
打开App,查看更多内容
随时随地看视频慕课网APP