javascript - Vue双向数据绑定,点击编辑的时候再确定,我把新的数组赋予给循坏数组,为什么还是没有变化
PHP中文网
PHP中文网 2017-04-11 13:06:32
0
0
389
    <p id="app">
        <check v-ref:check1 :lists.sync="lists"></check>
        <button @click="update">编辑</button>
        <input type="text" v-model="dataObject.name" placeholder="请填写name" :value="oldData.name">
        <button @click="save">确定</button>
    </p>
        
    <script type="text/x-template" id="check-temp">
        <input type="checkbox" v-model="checkboxAll">全选
        <ul>
            <li v-for="list in lists">
                <input type="checkbox" :value="list.fdId" v-model="checkbox">{{list.name}}
            </li>
        </ul>
    </script>
    <script>
    //这个是封装了全选个反选的组件
    Vue.component('check', {
        template: "#check-temp",
        props: ['lists'],
        computed: {
            checkboxAll: {
                get: function () {
                    return this.lists.length === this.checkbox.length;
                },
                set: function (newVal) {
                    if (newVal) {
                        this.checkbox = this.lists.map(function (item) {
                            return item.fdId
                        })
                    } else {
                        this.checkbox = [];
                    }
                }
            },
            checkboxLength: {
                get: function () {
                    return this.checkbox.length;
                }
            }
        },

        data: function () {
            return {
                checkbox: []
            }
        }

    });
    
    
    var vm = new Vue({
        el: "#app",
        data: {
            lists: [{fdId: 1, name: "我"}, {fdId: 2, name: "你"}, {fdId: 3, name: "他"}],
            ajaxData: [{fdId: 1, name: "你"}, {fdId: 2, name: "你"}, {fdId: 3, name: "哈哈"}],
            dataObject: {
                fdId: "",
                name: ""
            }
            checkboxLength: '',
            checkbox: []
        },
        methods: {
            update: function () {
                this.checkboxLength = this.$refs.check1.checkboxLength;
                this.checkbox = this.$refs.check1.checkbox;
                if (this.checkboxLength > 1) {
                    alert('只能勾选一条数据');
                } else if (this.checkboxLength < 1) {
                    alert('勾选一条数据');
                } else {
                    var _this = this;
                    console.log(this.lists);
                    this.lists.forEach(function (val, i) {
                        if (val.fdId == _this.checkbox[0]) {
                            _this.$set('dataObject', val);
                        }
                    });
                }
            },
            save: function () {
                var _this = this;
                setTimeout(function () {
                    _this.$set("lists", _this.ajaxData);
                });

                console.log(this.lists);
            }
        }
    });
</script>


这个是默认渲染。。。


这个图片是点击确定变化了数据。。。


之后勾选第三个‘哈哈”,点击编辑,数据变回以前的他。这是什么回事了?

最后发现了updata的方法this.lists数据没有更新过,但是我save的方法是重新赋值的( _this.$set("lists", _this.ajaxData);)

求大神是什么问题。。。。非常急。
1.我的想法是实现表格数据,之后勾选每一项都可以修改值,之后传给后台

PHP中文网
PHP中文网

认证0级讲师

모든 응답(0)
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿