Как допилить toggle и-ый клик на групы?

Question

toggle click между key и item

const ChooseListStudents = new Vue({
		el: '#chooseListStudents',
		data: {
			groups: [
				{1: ['Ivanov', 'Mac', 'Orehov']},
				{2: ['Shobdra', 'Rimar', 'Haguev']},
				{3: ['Slobodinaiuk', 'Shelepko', 'Androshuk']}
			],
			listStudent: [],
			showlistSt: false,
			addSt: true,
			itemstudent: false
		},
		methods: {
			addStudent(item) {
				this.listStudent.push(item);
			},
			ShowAllGroups() {
				this.showlistSt= true
				this.addSt= false
			},
			showStudent() {
				this.itemstudent=true
			}

		}
	})

<div id="chooseListStudents">
	<div v-for="(group, idx) in groups" :key="idx" v-show="showlistSt"> 
		<div v-for="(sub, key) in group" :key="key">
			<h3 @click="showStudent(this)"> Group {{ key }}</h3>
			<div v-for="(item, i) in sub" :key="i" @click="addStudent(item)" v-show="itemstudent">{{ item }}</div>
		</div>
	</div>

	<p>List students!</p>
	<button @click="ShowAllGroups()" v-show="addSt">Add</button>
	<div>
		<div v-for="student in listStudent">{{ student }}</div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Answer 1

Вот так получилось.

const ChooseListStudents = new Vue({
            el: '#chooseListStudents',
            data(){return {
                    groups:[
                        {id:1, members:['Ivanov', 'Mac', 'Orehov']},
                        {id:2, members:['Shobdra', 'Rimar', 'Haguev']},
                        {id:3, members:['Slobodinaiuk', 'Shelepko', 'Androshuk']},
                    ],
                    isShow:false,
                    listStudent:[]
            }},
            methods: {
                showGroup(i){
                    return this.groups[i].itemstudent = !this.groups[i].itemstudent;
                },
                addUser(list){
                    this.listStudent.push(list);
                }
            },
            created() {
                this.groups.forEach(element => {
                    this.$set(element, 'itemstudent', false)
                });
            },
        })

<div id="chooseListStudents">
            <ul v-for="(group,index) in groups" :key="group.id" v-show="isShow">
                   <h3 @click="showGroup(index)"> Group - {{group.id}} </h3>
                <li v-for="list in group.members" v-show="group.itemstudent" @click="addUser(list)">
                    {{list}}
                </li>
            </ul>
            <button @click="isShow=!isShow" v-show="!isShow">Add</button>
            <ul v-show="isShow">
                List students!
                <li v-for="lastName in listStudent">
                    {{lastName}}
                </li>
            </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

БЛОГ НА HUSL

Как допилить toggle и-ый клик на групы?

Ответы (1 шт):