Добавить элемент из двумерного массива в другой по клику, Vue.js

Question

new Vue({
  el: '#app',
  data: {
    groups: [{
        first: ['a', 'b', 'c']
      },
      {
        second: ['z', 'x', 'c']
      },
      {
        third: ['1', '2', '3']
      }
    ],
    listStudent: []
  },
  methods: {
    addStudent(item) {
      item = this.item;
      listStudent.push(item);
    }
  }
})

<div id="app">
  <ul v-for="group in groups">
    <li v-for="item in group" @click="addStudent(item)">{{item}}</li>
  </ul>
  <p>List students</p>
  <ul>
    <li v-for="student in listStudent">{{ student }}</li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Нужно вывести в html элементы двумерного массива.
По клику на элемент - добавить его в другой массив.

Заранее спасибо)

Answer 1

Код для JS пишется в блоке для JS'a ;)

const app = new Vue({
  el: '#app',
  data: {
    groups: [
      {first: ['a', 'b', 'c']},
      {second: ['z', 'x', 'c']},
      {third: ['1', '2', '3']}
    ],
    listStudent: []
  },
  methods: {
    addStudent(item) {
      this.listStudent.push(item)
    }
  }
})

// Не обязательно
Vue.config.productionTip = false
Vue.config.devtools = false

ul { margin: 0; padding: 15px; }
li { background: blue; cursor: pointer; color: white; }
li:hover { background: cyan; }

<div id="app">
  <div>
    <div v-for="(group, idx) in groups" :key="idx"> 
      <ul v-for="(sub, key) in group" :key="key" >
        <li>{{ key }}</li>
        <!-- <li v-for="(item, i) in sub" :key="i" @click="addStudent(item)">{{ item }}</li> -->
      </ul>
    </div>

    <p>List students</p>
    <ul>
      <li v-for="student in listStudent">{{ student }}</li>
    </ul>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

БЛОГ НА HUSL

Добавить элемент из двумерного массива в другой по клику, Vue.js

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