You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.2 KiB
HTML
49 lines
1.2 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<script src="https://unpkg.com/vue@next"></script>
|
||
|
|
<script src="../vue-cookies.js"></script>
|
||
|
|
<title>Welcome Username</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<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>
|
||
|
|
const app = Vue.createApp({
|
||
|
|
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);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
app.use($cookies).mount('#app');
|
||
|
|
</script>
|
||
|
|
</html>
|