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

2019-06-10  本文已影响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;

    }

}
上一篇下一篇

猜你喜欢

热点阅读