Vuejs中的单独数组推送

Question

I am trying to get value from object and push into array using Vue. I wanted to separate every value when into different array every time I click my item. Every time I click todo should be push on different array, how I can separate to push into different array

 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

Quick fix

One solution is to change mytodos into an array of 2 arrays (one for each TODO list):

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

Then, update your click -handler to pass the specific array element of mytodos along with the todo item to be added:

<!-- 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)">

And update myClickTodo to handle these new arguments:

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>

Components

A cleaner solution is to encapsulate the TODO list into a reusable component (eg, named "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);
    }
  }
});

...which would allow you to simplify your app template to this:

<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>