主页 / 问题 / 1099386
Accepted
slobodianiukvitali
Asked:2020-03-25 04:17:49 +0000 UTC2020-03-25 04:17:49 +0000 UTC

单击时将元素从二维数组添加到另一个数组，Vue.js

  • 772

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>

  1. 需要在html中显示二维数组的元素。
  2. 单击一个元素 - 将其添加到另一个数组。

提前致谢）

javascript

1 个回答

  1. Best Answer

    JS 代码写在 JS 块中；）

    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>

    • 2

相关问题