v-model 如何动态绑定，

分类：uni-app

uniapp

内容如下：希望通过改变lis的长度，来增加input框，用v-model绑定input，在lis初始值1，2，3有效，追加的4，5，6却变成了同一个值。怎么解决

<template>  
    <view>            
        <view v-for="(n,k) in lis">   
            <view>  
                {{k+1}}<input  type="text"  v-model="lis[k]['nm']"  ></input>  
            </view>   
        </view>  
        <view  @tap="add()">增加  </view>   
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                lis:[{nm:'a'},{nm:'b'},{nm:'c'}],  
            }  
        },  
        methods: {  
            add:function(){  
                let da=this.lis.slice(-1)[0]  
                this.lis.push(da)  
            }  
        }  
    }  
</script>

2023-08-17 11:28 负责人:无分享

2 个回复

不如摸鱼去 - 一个前端打工仔。如果我的回答对你产生了帮助，还请给个star: https://github.com/Moonofweisheng

<template>  
    <view>  
        <view v-for="(n,k) in lis">  
            <view>  
                {{k+1}}<input :key="k" type="text" v-model="lis[k]['nm']" @input="onInput" />  
            </view>  
        </view>  
        <view @tap="add()">增加 </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                lis: [{  
                    nm: 'a'  
                }, {  
                    nm: 'b'  
                }, {  
                    nm: 'c'  
                }],  
            }  
        },  
        methods: {  
            add: function() {  
                // 这里涉及到深拷贝的问题  
                // let da=this.lis.slice(-1)[0]    
                let da = JSON.parse(JSON.stringify((this.lis.slice(-1)[0]  )))  
                this.lis.push(da)  
            },  
            onInput() {  
                console.log(this.lis);  
            }  
        }  
    }  
</script>

网虫 (作者)

这个方法好用

2023-08-17 13:38

不如摸鱼去 - 一个前端打工仔。如果我的回答对你产生了帮助，还请给个star: https://github.com/Moonofweisheng

加个key

网虫 (作者)

{{k+1}}<input type="text" v-model="lis[k]['nm']" :key="k" ></input>？没有效果

2023-08-17 11:46

要回复问题请先登录或注册

v-model 如何动态绑定，

2 个回复

公告

相关问题

v-model 如何动态绑定，

与内容相关的链接

2 个回复

公告

相关问题