如何添加一个成员从数组到另一个vue.js?还有我们添加到另一个元素中，然后从第一个元素中删除的那个元素?

Question

如何添加一个成员从数组到另一个vue.js?还有我们要从第一个元素中删除的添加到另一个元素?

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

Answer 1

您可以通过将当前项传递给addTask，使用filter()将其从toDoniz中删除，并使用push()将其添加到doneNiz来实现:

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

看到它在工作:

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>

---

然而，在大多数实际场景中，您将不会使用原语数组(在本例中为字符串)，而是使用对象数组。

在这些情况下，与其将对象从一个数组移动到另一个数组，不如将它们保存在同一个数组中并修改它们的属性。并创建计算数组，根据它们的属性对它们进行过滤。

下面是你的例子，用对象完成:

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>

同样，用Composition API编写:

const { createApp, reactive, computed, toRefs } = Vue;
createApp({
setup: () => {
const state = reactive({
tasks: Array.from({ length: 6 }).map((_, k) => ({
name: `task ${k + 1}`,
done: false,
})),
toDoniz: computed(() => state.tasks.filter(({ done }) => !done)),
doneNiz: computed(() => state.tasks.filter(({ done }) => done)),
});
const toggleTask = (task) => {
task.done = !task.done;
};
return { ...toRefs(state), toggleTask };
},
}).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>

我们不仅不再需要将项目从一个数组移动到另一个数组，而且我们甚至可以用单个toggleTask方法替换addTask和removeTask，它不关心当前任务在哪个数组中，它只是将其doneprop设置为负值，计算数组相应地更新。