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

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;

    }

}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容