/
App.vue
98 lines (88 loc) · 2.08 KB
/
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
<div id="app">
<AppTaskSearch v-model="search" />
<AppTaskList :tasks="filteredTasks" />
<AppTaskAdd @addTask="addTask" />
</div>
</template>
<script>
import taskList from "./api/tasks.js";
import AppTaskList from "./components/AppTaskList.vue";
import AppTaskSearch from "./components/AppTaskSearch.vue";
import AppTaskAdd from "./components/AppTaskAdd.vue";
import { computed, watch, reactive, toRefs } from "@vue/composition-api";
export default {
name: "app",
setup() {
const tasksData = reactive({
tasks: taskList,
search: "",
filteredTasks: computed(() => {
return tasksData.tasks.filter(task =>
task.title.includes(tasksData.search)
);
})
});
function addTask(task) {
tasksData.tasks.push({
title: task,
completed: false
});
}
const { tasks, search } = toRefs(tasksData);
watch(() => {
console.log(tasks.value.length);
});
watch(search, (newSearch, oldSearch) => {
console.log(`Antes buscabas ${oldSearch} y ahora buscas ${newSearch}`);
});
// const tasks = ref(taskList);
// const search = ref("");
// const filteredTasks = computed(() => {
// return tasks.value.filter(task => task.title.includes(search.value));
// });
return { ...toRefs(tasksData), addTask };
},
components: {
AppTaskList,
AppTaskSearch,
AppTaskAdd
}
// Vue2
// created() {
// this.tasks = tasks;
// },
// data() {
// return {
// tasks: [],
// search: ""
// };
// },
// methods: {
// addTask(task) {
// this.tasks.push({
// title: task,
// completed: false
// });
// }
// },
// computed: {
// filteredTasks() {
// return this.tasks.filter(task => task.title.includes(this.search));
// }
// },
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
ul {
text-align: left;
}
</style>