One, Scene
By using the checkbox, achieve shown in the scene, click on a tag, to achieve checked and unchecked state.
Examples Second, the official website
Checked by switching the value of true or false to implement, a checkbox toggles the state
<template>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>
Results are as follows:
Third, think.
By circulating Li, checked attributes added to the data, and bound to the v-model, to achieve a scene. Template code is as follows:
<template>
<div class="demo">
<ul>
<li v-for="(item, index) in list" :key="index"> //循环li
<el-checkbox v-model="item.checked"> //v-model绑定到每个item的checked属性
{{ item.name }}
</el-checkbox>
</li>
</ul>
</div>
</template>
Background return data format (pruned), as follows (not checked attribute)
[
{ID:. 1, PID:. 1, name: 'area'},
{ID: 2, PID: 2, name: 'Genre'},
{ID:. 3, PID:. 4, name: 'Sex'},
{id: 4, pid: 5 , name: ' device type'},
{ID:. 5, PID:. 6, name: "leisure time '},
{ID:. 6, PID:. 7, name:" king glory'} ,
{ID:. 7, PID:. 8, name: 'music'},
{ID:. 8, PID:. 9, name: 'brand watches'},
{ID:. 9, PID: 10, name: 'camera'},
{id: 10, pid: 12 , name: ' game crowd'}
]
I have to do, mounted method to obtain background data, give each data cycle to add the checked attribute, the initial value is false.
<Script>
Export default {
name: 'Demo',
Data () {
return {
List: [],
allTags: [],
}
},
Methods: {
the getList () {
// Get data settimeout analog
setTimeout (() = > {
this.allTags = [
{ID:. 1, PID:. 1, name: 'area'},
{ID: 2, PID: 2, name: 'Genre'},
{ID:. 3, PID:. 4, name : 'sex'},
{ID:. 4, PID:. 5, name: 'device type'},
{ID:. 5, PID:. 6, name: "leisure time '},
{ID:. 6, PID:. 7, name : 'king glory'},
{ID:. 7, PID:. 8, name: 'Music'},
{ID:. 8, PID:. 9, name: 'brand watches'},
{ID:. 9, PID: 10, name:' camera '},
{ID: 10, PID: 12 is, name: "Game crowd'},
]
this.allTags.map (Item => {
item.checked = to false
return Item
})
This.List = this.allTags
}, 1500)
},
},
Mounted () {
this.getList ()
},
}
</ Script >
This is thought to realize the function to see results found the problem: Click when the hook is not only changed the color of the box.
Troubleshooting .....
(Brain make painful process ......)
guess:
1, element does not support this method bindings, can only official network example, the cycle el-checkbox to achieve.
2, vue binding problem
For Question 1: replaced cycle el-checkbox, we found that the result is not the same. negative!
The rest is speculation two:
Artificial plus the return default checked attribute data, i.e., data format:
[
{ID:. 1, PID:. 1, name: 'area', the checked: to false},
{ID: 2, PID: 2, name: 'Genre', the checked: to false},
{ID:. 3, PID:. 4 , name: 'sex', checked: to false},
{ID:. 4, PID:. 5, name: 'device type', checked: to false},
{ID:. 5, PID:. 6, name: 'leisure time', checked : to false},
{ID:. 6, PID:. 7, name: 'king glory', the checked: to false},
{ID:. 7, PID:. 8, name: 'Music', the checked: to false},
{ID:. 8, pid: 9, name: 'brand of watches', the checked: to false},
{ID:. 9, PID: 10, name:' camera ', the checked: to false},
{ID: 10, PID: 12 is, name:' game crowd ', the checked: to false},
]
Discover the test, so you can.
confused. . .
Then print data in the console, compared the results.
The front end of the case and the checked attribute added back return data, there have been checked out, respectively, as the print attributes 1 and 2
Figure 1 Figure 2
Compare the discovery, adding checked the front property, vue does not add get set method, therefore, can not monitor checked value changes, and thus can not be updated view. This can be seen in the browser vue debugging, checked attribute true and false clicks when data are alternates, but the view is not synchronized. Cut up a map
Fourth, the solution
Both methods,
1, do not get allTags value assigned to the data property, but the definition of temporary variables let, after completing the operation, assigned to List, namely:
<Script>
Export default {
name: 'Demo',
Data () {
return {
List: [],
}
},
Methods: {
the getList () {
// Get the analog data settimeout
the setTimeout (() => {
the let allTags = [// let defined herein allTags
{ID:. 1, PID:. 1, name: 'area'},
{ID: 2, PID: 2, name: 'Genre'},
{ID:. 3, PID:. 4, name : 'sex'},
{ID:. 4, PID:. 5, name: 'device type'},
{ID:. 5, PID:. 6, name: "leisure time '},
{ID:. 6, PID:. 7, name : 'king glory'},
{ID:. 7, PID:. 8, name: 'music'},
{Id: 8, pid: 9 , name: ' brand of watches'},
{ID:. 9, PID: 10, name:' camera '},
{ID: 10, PID: 12 is, name: "Game crowd'},
]
allTags.map (Item => {
item.checked = to false
return Item
})
This.List = allTags
}, 1500)
},
},
Mounted () {
this.getList ()
},
}
</ Script>
2 (recommended), with vue. $ Set method, forced vue monitor checked property
<Script>
Export default {
name: 'Demo',
Data () {
return {
List: [],
}
},
Methods: {
the getList () {
// Get the analog data settimeout
the setTimeout (() => {
this.allTags = [// let defined herein allTags
{ID:. 1, PID:. 1, name: 'area'},
{ID: 2, PID: 2, name: 'Genre'},
{ID:. 3, PID:. 4, name: 'sex'},
{ID:. 4, PID:. 5, name: 'device type'},
{ID:. 5, PID:. 6, name: 'leisure time'},
{ID:. 6, PID:. 7, name: 'king glory'},
{ID:. 7, PID:. 8, name: 'music'},
{Id: 8, pid: 9 , name: ' brand of watches'},
{ID:. 9, PID: 10, name:' camera '},
{ID: 10, PID: 12 is, name: "Game crowd'},
]
this.allTags.map (Item => {
//item.checked to false =
the this. $ set (Item, 'the checked', to false) // here, add attributes to the object, a method of $ set.
return Item
})
the this = this.allTags .list
}, 1500)
},
},
Mounted () {
this.getList ()
},
}
</ Script>
done！！
V. Summary.
The problem is the problem I encountered in the project, after locking problems step by step, out to do the most stripped-down version, so do this summary, but also to meet other children's shoes pit a little help.
ps, with each element ui will have some feelings, smile.