<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.我的想法是实现表格数据,之后勾选每一项都可以修改值,之后传给后台
认证0级讲师