Отдельный массив push в Vuejs

Question

Я пытаюсь получить значение из объекта и вставить в массив с помощью Vue. Я хотел разделить каждое значение, когда в другой массив каждый раз, когда я щелкаю свой элемент. Каждый раз, когда я нажимаю todo, нужно нажать на другой массив, как я могу разделить, чтобы вставить в другой массив

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 в повторно используемый компонент (например, с именем "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>