1. Two identical functions, same method, one valid, one invalid
2. Invalid code:
<Row :gutter="10" style="margin-top: 10px" v-for="(col, index) in categoryList" :key="index">
<Col span="4" v-for="(item, index) in col" :key="index">
<category-info :info="item"></category-info>
</Col>
</Row>mounted() {
this.getCategoryList()
},
computed: {
categoryList() {
let list = _.chunk(this.$store.state.category.categoryList, 6)
return list
},
categoryTotal() {
return this.$store.state.category.categoryTotal
}
},
methods: {
getCategoryList() {
this.$store.dispatch("getCategoryList")
}
}3.categoryInfo
props: {
info: Object,
},4.store
const category = {
state: {
categoryList: [],
categoryTotal: 0,
},
mutations: {
GETCATEGORYLIST (state, data) {
state.categoryTotal = data.data.length
let categoryList = data.data
state.categoryList = categoryList
},
DELETECATEGORY (state, typeId) {
state.categoryTotal--
state.categoryList = _.remove(state.categoryList, v => {
return v.typeId != typeId
})
}
},
actions: {
// category
getCategoryList (context) {
Util.ajax
.get("/type/all")
.then(res => {
context.commit("GETCATEGORYLIST",res.data)
})
},
deleteCategory (context, typeId) {
Util.ajax
.delete(`/type/delete?typeIds=${typeId}`)
.then(res => {
if(res.data.status == 0) {
context.commit("DELETECATEGORY", typeId)
}
})
},
}
}
export default categoryrefresh the page-> mounted- > retrieve the data. At this time, the store has data changes, but the page is blank
.another product list is valid in the same way, strangely, is it because the object of computed is an array? Or is there something wrong with the writing