Skip to content

H
hello-vuejs
Commit fd0e4078 by Nghia Pham
Options

Update Layout Bootstrap

parent 7672642f
Pipeline #1511 canceled with stages
in 0 seconds
Showing with 65 additions and 18 deletions
3-todo/package-lock.json
...@@ -2623,6 +2623,12 @@ ...@@ -2623,6 +2623,12 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true "dev": true
}, },
"bootstrap": {
"version": "4.0.0-beta",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.tgz",
"integrity": "sha512-I/r3fYtUZr+rUNkh8HI+twxZ56p6ehNn27eA1XSebLVQKAJ2xZHnEvZrSR+UR2A/bONcd9gHC3xatVhQlH6R6w==",
"dev": true
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
...@@ -6785,6 +6791,12 @@ ...@@ -6785,6 +6791,12 @@
"integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==", "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
"dev": true "dev": true
}, },
"jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
"dev": true
},
"js-message": { "js-message": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz", "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
...@@ -8164,6 +8176,12 @@ ...@@ -8164,6 +8176,12 @@
"ts-pnp": "^1.1.6" "ts-pnp": "^1.1.6"
} }
}, },
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
"dev": true
},
"portfinder": { "portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
......
3-todo/package.json
...@@ -17,8 +17,11 @@ ...@@ -17,8 +17,11 @@
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"bootstrap": "^4.0.0-beta",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
}, },
"eslintConfig": { "eslintConfig": {
......
3-todo/src/components/Task/TaskItem.vue
<template> <template>
<p> <div>
{{ item.name }} {{ item.name }}
<button v-on:click="removeTask(item.id)">Delete</button> </div>
</p>
</template> </template>
<script> <script>
......
3-todo/src/components/Task/TaskList.vue
<template> <template>
<div> <div class="row">
<input v-model="taskNew.name" /> <div class="col"></div>
<button v-on:click="createTaskNew()">Add</button> <div class="col">
<li class="item" v-for="item in getTaskList" :key="item.id"> <div>
<TaskItem v-bind:item="item" /> <div class="mb-3">
</li> <label for="exampleFormControlInput1" class="form-label"
>Enter to add new todo</label
>
<input
v-model="taskNew.name"
type="text"
class="form-control"
v-on:keyup.enter="createTaskNew()"
placeholder="To do"
/>
</div>
<ul class="list-group " v-for="item in getTaskList" :key="item.id">
<li
class="
list-group-item list-group-item-action
d-flex
justify-content-between
align-items-center
"
>
<TaskItem v-bind:item="item" />
<button type="button" class="btn btn-primary badge bg-primary rounded-pill" v-on:click="removeTask(item.id)">x</button>
</li>
</ul>
</div>
</div>
<div class="col"></div>
</div> </div>
</template> </template>
...@@ -25,7 +53,7 @@ export default { ...@@ -25,7 +53,7 @@ export default {
}; };
}, },
computed: { computed: {
...mapGetters(["getTaskList","getTaskLast"]), ...mapGetters(["getTaskList", "getTaskLast"]),
createTaskId() { createTaskId() {
if (typeof this.getTaskLast !== "undefined") { if (typeof this.getTaskLast !== "undefined") {
...@@ -40,7 +68,7 @@ export default { ...@@ -40,7 +68,7 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
...mapActions(["addTask"]), ...mapActions(["addTask","removeTask"]),
cleanTaskNew() { cleanTaskNew() {
this.taskNew.name = ""; this.taskNew.name = "";
...@@ -49,7 +77,6 @@ export default { ...@@ -49,7 +77,6 @@ export default {
createTaskNew() { createTaskNew() {
const taskId = this.createTaskId; const taskId = this.createTaskId;
const taskName = this.taskNew.name; const taskName = this.taskNew.name;
console.log(taskId);
const task = { const task = {
id: taskId, id: taskId,
name: taskName, name: taskName,
...@@ -66,7 +93,5 @@ export default { ...@@ -66,7 +93,5 @@ export default {
</script> </script>
<style > <style >
.item {
list-style-type: none;
}
</style> </style>
3-todo/src/main.js
import Vue from 'vue'; import Vue from 'vue';
import App from './App.vue'; import App from './App.vue';
import store from '@/store'; import store from '@/store';
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false; Vue.config.productionTip = false;
......
3-todo/src/store/modules/tasks.js
...@@ -9,15 +9,15 @@ const state = { ...@@ -9,15 +9,15 @@ const state = {
list: [ list: [
{ {
id: 1, id: 1,
name: 'Do something awesome!', name: 'Sáng chạy bộ 30 phút ',
}, },
{ {
id: 2, id: 2,
name: 'Buy toilet paper', name: 'Báo cáo công việc',
}, },
{ {
id: 3, id: 3,
name: 'Learn Vue', name: 'Học tiếng anh',
} }
] ]
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment