Created
July 28, 2022 04:04
-
-
Save fajar7xx/292e350599b11c45731627f993a9fb45 to your computer and use it in GitHub Desktop.
vue composition api from vueschool.io
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script setup> | |
| import { ref, computed } from 'vue' | |
| const header = ('Shopping list app') | |
| const characterCount = computed(() => { | |
| return newItem.value.length | |
| }) | |
| const editingItem = ref(false) | |
| const items = ref([ | |
| { | |
| id:1, | |
| label:"10 party hats", | |
| purchased: true, | |
| highPriority: true | |
| }, | |
| { | |
| id:2, | |
| label:"2 board games", | |
| purchased: false, | |
| highPriority: false | |
| }, | |
| { | |
| id:3, | |
| label:"20 cups", | |
| purchased: true , | |
| highPriority: false | |
| }, | |
| { | |
| id: 4, | |
| label: "10 Cakes", | |
| purchased: false, | |
| highPriority: true | |
| } | |
| ]) | |
| const reversedItems = computed(() => { | |
| return [...items.value].reverse() | |
| }) | |
| const newItem = ref("") | |
| const newItemHighPriority = ref(false) | |
| const saveItem = () => { | |
| items.value.push({ | |
| id: items.value.length + 1, | |
| label: newItem.value, | |
| highPriority: newItemHighPriority.value | |
| }) | |
| resetForm() | |
| //newItem.value = "" | |
| //newItemHighPriority.value = "" | |
| } | |
| const doEdit = (e) => { | |
| editingItem.value = e | |
| resetForm() | |
| //newItem.value = "" | |
| //newItemHighPriority.value = "" | |
| } | |
| const resetForm = () => { | |
| newItem.value = "" | |
| newItemHighPriority.value = "" | |
| } | |
| const togglePurchased = (item) => { | |
| item.purchased = !item.purchased | |
| } | |
| </script> | |
| <template> | |
| <div class="header"> | |
| <h1>{{ header }}</h1> | |
| <button v-if="editingItem" class="btn" @click="doEdit(false)"> | |
| cancel | |
| </button> | |
| <button v-else class="btn btn-primary" @click="doEdit(true)"> | |
| Add Item | |
| </button> | |
| </div> | |
| <form | |
| v-if="editingItem" | |
| class="add-item-form" | |
| @submit.prevent="saveItem"> | |
| <input type="text" placeholder="Add item" v-model.trim="newItem" /> | |
| Priority: | |
| <label> | |
| <input type="checkbox" v-model="newItemHighPriority"/> | |
| High Priority | |
| </label> | |
| <button | |
| :disabled="newItem.length < 5" | |
| class="btn btn-primary" | |
| type="submit"> | |
| Save Item | |
| </button> | |
| </form> | |
| <p class="counter" v-if="editingItem"> | |
| {{characterCount}} | |
| </p> | |
| <ul> | |
| <li | |
| @click="togglePurchased(item)" | |
| v-for="item in reversedItems" | |
| :key="item.id" | |
| class="static-class" | |
| :class="{ | |
| strikeout: item.purchased, | |
| priority: item.highPriority | |
| }"> | |
| {{item.label}} | |
| </li> | |
| </ul> | |
| <p v-if="!items.length"> | |
| Nothing to see here | |
| </p> | |
| </template> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment