uniapp for显示数据改变时,绑定的list值同时改变

 

<template>
    <view class="container">
        <uni-table>
            <uni-tr v-for="(row,idx) in Table" :key="idx">
                <uni-td><view>{{row.ID}}</view></uni-td>
                <uni-td>
                    <input type="text" @input="nmInput" @blur="nmblur(idx)" :value="row.NM" />
                </uni-td>
            </uni-tr>
        </uni-table>
    </view>
</template>

<script>
    export default 
    {
        data() {
            return {
                    Table:[],
                    nmText:""
            }
        },
        methods:
        {
            //获取输入的值
            nmInput(e){
                console.log(e.detail.value);
                this.nmText = e.detail.value;
            },
            //焦点离开时将值赋给list
            nmblur(idx)
            {
                this.Table[idx].NM = this.nmText;
                //this.Table.splice(要替换下标, 替换个数, 替换元素);
                this.Table.splice(idx, 1, this.Table[idx]);
            }
        },
        onLoad() 
        {
            for(var i=0;i<3;i++)
            {
                var row = 
                {
                    "ID":i,
                    "NM":"备注"
                };
                this.Table.push(row);
            }
        }
    }
</script>

<style>
</style>

 

posted on 2021-08-02 14:46  生命之森  阅读(979)  评论(0编辑  收藏  举报

导航