vue-cookies3
Version:
A simple Vue.js plugin for handling browser cookies
51 lines (46 loc) • 1.18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../vue-cookies.js"></script>
<title>Welcome Username</title>
</head>
<body>
<div id="v-main">
<p v-if="!welcomeValue">
Please enter your name : <input type="text" @keyup.enter="username">
</p>
<p v-else>
Welcome again : {{ welcomeValue }}
<button @click="deleteUser">{{deleteUserText}}</button>
{{deleteUserState}}
</p>
</div>
</body>
<script>
new Vue({
el:'#v-main',
data: function() {
return {
welcomeValue: this.$cookies.get('username'),
deleteUserText : 'Delete Cookie',
deleteUserState:''
}
},
methods: {
username : function(event){
this.welcomeValue = event.target.value;
this.$cookies.set('username', this.welcomeValue)
},
deleteUser: function(){
this.$cookies.remove('username');
this.deleteUserState = '√'
setTimeout(function(){
location.reload()
}, 0.5 * 1000)
}
}
})
</script>
</html>