Skip to content

Instantly share code, notes, and snippets.

@fajar7xx

fajar7xx/vue-composisition-api.vue

Created July 28, 2022 04:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fajar7xx/292e350599b11c45731627f993a9fb45 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fajar7xx/292e350599b11c45731627f993a9fb45 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fajar7xx created this gist Jul 28, 2022.
    112 changes: 112 additions & 0 deletions vue-composisition-api.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,112 @@
    <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>