Vue.js中的单独数组推送

Question

我正在尝试从对象中获取价值，并使用Vue将其推入数组。每次单击项目时，我都希望将每个值分成不同的数组。每次单击待办事项都应将其推入不同的阵列，如何将其分开以推入不同的阵列

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ],
    mytodo:[]
  },
  methods: {
  	myClickTodo: function(e){
    	this.mytodo.push(e.target.innerText) 
    	console.log(e.target.innerText)
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <h2>My list One:</h2>
  <ul>
    <li v-for="todo in todos" @click="myClickTodo">
      {{ todo.text + " from todo one" }}
    </li>
  </ul>

  <p>todo 1 </p>
  <p>{{mytodo}}</p>

<hr>

<h2>My list Two:</h2>
  <ul>
    <li v-for="todo in todos" @click="myClickTodo">
      {{ todo.text + " from todo two" }}
    </li>
  </ul>


  <p>todo 2</p>
  <p>{{mytodo}}</p>
</div>

Answer 1

快速修复

一种解决方案是将mytodos更改为2个数组（每个TODO列表一个）：

data() {
  return {
    mytodo: [[], []]
  };
}

然后，更新您的click处理程序，以传递mytodos的特定数组元素以及要添加的todo项：

<!-- My list One -->
<li v-for="todo in todos" @click="myClickTodo(mytodos[0], todo)">

<!-- My list Two -->
<li v-for="todo in todos" @click="myClickTodo(mytodos[1], todo)">

并更新myClickTodo以处理以下新参数：

methods: {
  myClickTodo(mytodo, todo) {
    mytodo.push(todo.text);
  }
}

new Vue({
  el: '#app',
  data: () => ({
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ],
    mytodo: [[], []]
  }),
  methods: {
    myClickTodo(mytodo, todo) {
      mytodo.push(todo.text); 
      console.log(todo.text);
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <h2>My list One:</h2>
  <ul>
    <li v-for="todo in todos" @click="myClickTodo(mytodo[0], todo)">
      {{ todo.text + " from todo one" }}
    </li>
  </ul>

  <p>todo 1 </p>
  <p>{{mytodo[0]}}</p>

  <hr>

  <h2>My list Two:</h2>
  <ul>
    <li v-for="todo in todos" @click="myClickTodo(mytodo[1], todo)">
      {{ todo.text + " from todo two" }}
    </li>
  </ul>


  <p>todo 2</p>
  <p>{{mytodo[1]}}</p>
</div>

组件

更清洁的解决方案是将TODO列表封装到可重用的component中（例如，命名为“ my-list”）：

Vue.component('my-list', {
  data: () => ({
    title: '',
    mytodo: [],
  }),
  props: {
    todos: {
      type: Array,
      default: () => []
    }
  },
  template: `<div>
    <h2>{{title}}</h2>
      <ul>
        <li v-for="todo in todos" @click="myClickTodo(mytodo, todo)">
          {{ todo.text + " from todo one" }}
        </li>
      </ul>

      <p>{{mytodo}}</p>
    </div>`,
  methods: {
    myClickTodo(mytodo, todo) {
      mytodo.push(todo.text);
      console.log(todo.text);
    }
  }
});

...这将使您将应用模板简化为：

<my-list title="My List One:" :todos="todos"></my-list>
<my-list title="My List Two:" :todos="todos"></my-list>

Vue.component('my-list', {
  data: () => ({
    mytodo: [],
  }),
  props: {
    title: '',
    todos: {
      type: Array,
      default: () => []
    }
  },
  template: `<div>
      <h2>{{title}}</h2>
      <ul>
        <li v-for="todo in todos" @click="myClickTodo(mytodo, todo)">
          {{ todo.text + " from todo one" }}
        </li>
      </ul>

      <p>{{mytodo}}</p>
    </div>`,
  methods: {
    myClickTodo(mytodo, todo) {
      mytodo.push(todo.text);
      console.log(todo.text);
    }
  }
});

new Vue({
  el: '#app',
  data: () => ({
    todos: [
      { text: "Learn JavaScript"},
      { text: "Learn Vue"},
      { text: "Play around in JSFiddle"},
      { text: "Build something awesome"}
    ],
  }),
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <my-list title="My List One:" :todos="todos"></my-list>
  <my-list title="My List Two:" :todos="todos"></my-list>
</div>