vue中更改数组中属性,在页面中不生效
2017-11-03 18:11
405 查看
问题描述:
使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态
解决方案:
edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,这样在改变edit的之后,虽然在js中使用console.log可以看到该值已经发生变化,但页面中的data值并没有发生变化。
正确的做法应该是先为接收到的数据初始化edit属性,再将处理后的数据赋值给vue的data。
代码如下
<tbody>
<tr v-for="(book,index) in bookList">
<td>
<span v-on:click="book.edit=true" v-show=" !book.edit">{{book.orderIndex}}</span> //如果edit属性为false,则该span出现
<input v-show="book.edit" /> //如果edit属性为true,则该input出现
</td>
<td>
<a v-show="book.edit" v-on:click="book.edit=false" class="btn btn-primary btn-sm"> //如果edit属性为true,出现不保存(x)按钮
<i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
</a>
<a v-show="book.edit" v-on:click="save(book)" class="btn btn-primary btn-sm"> //如果edit属性为true,出现保存(√)按钮
<i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
<script>
var politics = new Vue({
el:"#politics",
data:{
bookList:[]
},
methods:{
getBookList: function (offset, limit, CatalogueID, searchKey, resId) {
this.limit = limit;
this.offset = offset;
this.CatalogueID = CatalogueID;
this.searchKey = searchKey;
this.resId = resId;
this.$http.get("/BookAdmin/getBookList?offset=" + this.offset + "&limit=" + this.limit + "&CatalogueID=" + this.CatalogueID + "&searchKey=" + this.searchKey+"&resId="+this.resId)
.then(function (resp) {
resp.data.books.forEach(function (o, i) {
o.edit = false;
})
this.bookList = resp.data.books; // 赋值必须写在属性初始化的后面,否则改edit不能使页面属性变化
this.bookTotalCount = resp.data.totalCount;
var pageNo = this.offset / this.limit + 1;
var totalPage = Math.ceil(this.bookTotalCount / this.limit);
divpager(pageNo, totalPage, this.bookTotalCount, this.CatalogueID, this.searchKey, this.resId);
})
}
}
})
</script>
使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态
解决方案:
edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,这样在改变edit的之后,虽然在js中使用console.log可以看到该值已经发生变化,但页面中的data值并没有发生变化。
正确的做法应该是先为接收到的数据初始化edit属性,再将处理后的数据赋值给vue的data。
代码如下
<tbody>
<tr v-for="(book,index) in bookList">
<td>
<span v-on:click="book.edit=true" v-show=" !book.edit">{{book.orderIndex}}</span> //如果edit属性为false,则该span出现
<input v-show="book.edit" /> //如果edit属性为true,则该input出现
</td>
<td>
<a v-show="book.edit" v-on:click="book.edit=false" class="btn btn-primary btn-sm"> //如果edit属性为true,出现不保存(x)按钮
<i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
</a>
<a v-show="book.edit" v-on:click="save(book)" class="btn btn-primary btn-sm"> //如果edit属性为true,出现保存(√)按钮
<i class="glyphicon glyphicon-ok" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
<script>
var politics = new Vue({
el:"#politics",
data:{
bookList:[]
},
methods:{
getBookList: function (offset, limit, CatalogueID, searchKey, resId) {
this.limit = limit;
this.offset = offset;
this.CatalogueID = CatalogueID;
this.searchKey = searchKey;
this.resId = resId;
this.$http.get("/BookAdmin/getBookList?offset=" + this.offset + "&limit=" + this.limit + "&CatalogueID=" + this.CatalogueID + "&searchKey=" + this.searchKey+"&resId="+this.resId)
.then(function (resp) {
resp.data.books.forEach(function (o, i) {
o.edit = false;
})
this.bookList = resp.data.books; // 赋值必须写在属性初始化的后面,否则改edit不能使页面属性变化
this.bookTotalCount = resp.data.totalCount;
var pageNo = this.offset / this.limit + 1;
var totalPage = Math.ceil(this.bookTotalCount / this.limit);
divpager(pageNo, totalPage, this.bookTotalCount, this.CatalogueID, this.searchKey, this.resId);
})
}
}
})
</script>
相关文章推荐
- vue数组中对象属性变化页面不渲染问题
- vue-cli 更改数组中的数据,页面dom及时渲染 Vue.set方法
- 解决vue数组中对象属性变化页面不渲染问题
- vue 数组内对象修改属性页面不渲染问题
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- vue中for循环更改数据,数据变化但页面数据未变
- Vue 数组中更新属性值后,视图不更新,等待其他元素更新后会触发的解决办法
- 解决vue页面DOM操作不生效的问题
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
- 解决Vue 通过下表修改数组,页面不渲染的问题
- vue 更改计算属性后select选中值不更改的解决方法
- Vue 改变数组中对象的属性不重新渲染View的解决方案
- vue页面开发遇到的坑,都是泪!src属性,freemarker取值
- vue.js遇到的问题-数组数据改变,页面不能实时显示
- Vue中数组和对象更改后视图不刷新的问题
- 详解Vue中数组和对象更改后视图不刷新的问题
- Vue Spa切换页面时更改标题
- 当更新user表时,页面没有的属性,执行update语句不会更改以前的值
- 解决vue 更改计算属性后select选中值不更改的问题
- 直接给vue数组赋值,无法渲染到页面