美文网首页
vue计算属性绑定input双向绑定失效

vue计算属性绑定input双向绑定失效

作者: 本悟好 | 来源:发表于2019-06-10 11:09 被阅读0次

    vue 计算属性直接绑定input,双向绑定会失效


    
        <div v-for = "(item, index) in list": key = "index" >
    
            <el - input v-model = "item.name" > < /el-input>
    
        </div>
    
    

    怎么解决了,只需要两步

    1. 在mounted里面把计算属性adList赋给list

    2. watch监听变化并赋值

    export default {
    
        computed: {
    
            ...mapGetters({
    
                componentForm: "form"
    
            }),
    
            adList() {
    
                const arr = [];
    
                this.componentForm.list.forEach(item => {
    
                    const listItem = item.list;
    
                    arr.push(list[0] || [{
    
                        name: 'abc'
    
                    }])
    
                })
    
                return arr
    
            }
    
        },
    
        watch: {
    
            adList: {
    
                deep: true,
    
                handler: function(newData, oldData) {
    
                    this.list = newData;
    
                }
    
            }
    
        },
    
        data() {
    
            return {
    
                list: []
    
            }
    
        },
    
        mounted() {
    
            this.list = this.adList;
    
        }
    
    }
    

    相关文章

      网友评论

          本文标题:vue计算属性绑定input双向绑定失效

          本文链接:https://www.haomeiwen.com/subject/wiwaxctx.html