menu

Questions & Answers

How to add one member from array to another in vue.js? and also that member that we add to another to delete from the firts?

How to add one member from array to another in vue.js? and also that member that we add to another to delete from the first?

<div class="main">
    <div class="toDo">
      <button @click="addTask" class="btn" v-for="n in toDoniz" :key="n">
        {{ n }}
      </button>
    </div>
    <div class="push">
      <button @click="push" class="btn" v-for="n in doneNiz" :key="n">
        {{ n }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      toDoniz: ["task 1", "task 2", "task 3", "task 4", "task 5", "task 6"],
      doneNiz: [],
    };
  },
  name: "HelloWorld",
  methods: {
    addTask() {
      this.doneNiz.push(this.toDoniz);
    },
  },
};
</script>
Comments:
2023-01-17 23:20:02
Can you explain me how does filter work? and this (t)?
2023-01-17 23:20:02
I added MDN links to both filter and push to my answer.
Answers(1) :

You can achieve it by passing the current item to addTask, removing it from toDoniz using filter() and adding it to doneNiz using push():

<template>
  <!-- ... -->
    <button @click="addTask(n)" class="btn" v-for="n in toDoniz" :key="n">
      {{ n }}
    </button>
  <!-- ... -->
</template>
<script>
// ...
  
    addTask(task) {
      this.toDoniz = this.toDoniz.filter(t => t !== task),
      this.doneNiz.push(task)
    }
// ...
</script>

See it working:

const { createApp } = Vue;
createApp({
  data: () => ({
    toDoniz: ["task 1", "task 2", "task 3", "task 4", "task 5", "task 6"],
    doneNiz: [],
  }),
  methods: {
    addTask(task) {
      this.toDoniz = this.toDoniz.filter((t) => t !== task);
      this.doneNiz.push(task);
    },
    removeTask(task) {
      this.doneNiz = this.doneNiz.filter((t) => t !== task);
      this.toDoniz.push(task);
    },
  },
}).mount("#app");
<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js"></script>
<div id="app">
  <div class="toDo">
    <h3>toDoniz:</h3>
    <button @click="addTask(n)" class="btn" v-for="n in toDoniz" :key="n">
      {{ n }}
    </button>
  </div>
  <div class="push">
    <h3>doneNiz:</h3>
    <button @click="removeTask(n)" class="btn" v-for="n in doneNiz" :key="n">
      {{ n }}
    </button>
  </div>
</div>


However, in most real-life scenarios, you won't be working with arrays of primitives (in this case, strings), but with arrays of objects.

In those cases, rather than moving objects from one array to another, it's better to keep them in the same array and modify their properties. And create computed arrays which filter them by their properties.

Here's your example, done with objects:

const { createApp } = Vue;
createApp({
  data: () => ({
    tasks: Array.from({ length: 6 }).map((_, k) => ({
      name: `task ${k + 1}`,
      done: false,
    })),
  }),
  computed: {
    toDoniz() {
      return this.tasks.filter(({ done }) => !done);
    },
    doneNiz() {
      return this.tasks.filter(({ done }) => done);
    },
  },
  methods: {
    toggleTask(task) {
      task.done = !task.done;
    },
  },
}).mount("#app");
#app {
  display: flex;
}
#app > * {
  flex: 1;
}
<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js"></script>
<div id="app">
  <div>
    <div class="toDo">
      <h3>toDoniz:</h3>
      <button
        @click="toggleTask(t)"
        class="btn"
        v-for="(t, key) in toDoniz"
        :key="key"
      >
        {{ t.name }}
      </button>
    </div>
    <div class="push">
      <h3>doneNiz:</h3>
      <button
        @click="toggleTask(t)"
        class="btn"
        v-for="(t, key) in doneNiz"
        :key="key"
      >
        {{ t.name }}
      </button>
    </div>
  </div>
  <pre v-text="JSON.stringify({ tasks }, null, 2)" />
</div>

Not only we no longer need to move the item from one array to the other, but we can even replace addTask and removeTask with a single toggleTask method, which doesn't care in which array the current task is, it simply sets its done prop to its negative and the computed arrays update accordingly.

Comments:
2023-01-17 23:20:02
thank you for answer!