Nuxt/examples/with-cookies/pages/index.vue

86 lines
1.7 KiB
Vue
Executable File

<template>
<div>
<h1>Cookies</h1>
<table>
<thead>
<tr>
<th>Key</th><th>Value</th><th />
</tr>
</thead>
<tbody>
<tr v-for="(value, key) in cookies" :key="key">
<td>{{ key }}</td>
<td>{{ value }}</td>
<td>
<button @click="removeCookie(key)">
Remove
</button>
</td>
</tr>
</tbody>
</table>
<h2>Add a new cookie</h2>
<form @submit.prevent="addCookie">
<input v-model="newCookie.key" type="text" placeholder="Key" class="key">:
<input v-model="newCookie.value" type="text" placeholder="Value" class="value">
<button type="submit">
Add
</button>
</form>
</div>
</template>
<script>
export default {
data: () => ({
newCookie: {
key: '',
value: ''
}
}),
computed: {
cookies() {
return this.$cookies.cookies
}
},
methods: {
addCookie() {
// Make sure the cookie is not empty
if (!this.newCookie.key || !this.newCookie.value) return
// Sanitize the key to avoid spaces
const cookieKey = this.newCookie.key.replace(/\s/g, '-')
// Add the cookie
this.$cookies.set(cookieKey, this.newCookie.value)
// Reset newCookie data
this.newCookie.key = this.newCookie.value = ''
},
removeCookie(key) {
this.$cookies.remove(key)
}
}
}
</script>
<style scoped>
table {
text-align: left;
}
th, td {
padding-right: 10px;
}
input.key {
width: 50px;
}
input.value {
width: 100px;
}
input, button {
border: 1px #ddd solid;
background: white;
padding: 5px;
}
button[type="submit"] {
margin-left: 5px;
}
</style>