Problem description:
The array data is obtained using the vue method. After obtaining the data, the edit attribute is added to each data. The initial value is false. The purpose is to control the occurrence and disappearance of saved and unsaved buttons when clicking the edit button in the list. As a result, after changing the edit attribute in the array, the page does not display the change status as expected when edit is true. When edit is false, it is the unchanged status.
Solution:
edit is an attribute added to the vue data data after obtaining data through the post method. At the beginning, I first assign the received data to the vue data, and then add the edit attribute to the data in vue data. In this way, after changing the edit, although you can see that the value has changed in js, the data value in the page has not changed.
The correct way to do this is to initialize the edit attribute for the received data first, and then assign the processed data to the vue data.
The code is as follows
<tbody>
<tr v-for="(book,index) in bookList">
<td>
<span v-on:click="=true" v-show=" !">{{}}</span> //If the edit attribute is false, the span appears <input v-show="" /> //If the edit attribute is true, the input appears </td>
<td>
<a v-show="" v-on:click="=false" class="btn btn-primary btn-sm"> //If the edit attribute is true, the non-save (x) button appears <i class="glyphicon glyphicon-remove" aria-hidden="true"></i>
</a>
<a v-show="" v-on:click="save(book)" class="btn btn-primary btn-sm"> //If the edit attribute is true, the Save (√) button appears <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) {
= limit;
= offset;
= CatalogueID;
= searchKey;
= resId;
this.$("/BookAdmin/getBookList?offset=" + + "&limit=" + + "&CatalogueID=" + + "&searchKey=" + +"&resId="+)
.then(function (resp) {
(function (o, i) {
= false;
})
= ; // The assignment must be written after the attribute initialization, otherwise changing edit cannot change the page attribute = ;
var pageNo = / + 1;
var totalPage = ( / );
divpager(pageNo, totalPage, , , , );
})
}
}
})
</script>
The solution to changing properties in the array in the above vue article and not taking effect on the page is all the content I share with you. I hope you can give you a reference and I hope you support me more.