vue2_frontend init..
This commit is contained in:
commit
58481fe5ab
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
8
.prettierrc
Normal file
8
.prettierrc
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"semi": false,
|
||||
"bracketSapcing": true,
|
||||
"singleQuote": true,
|
||||
"useTabs": false,
|
||||
"trailingComma": "none",
|
||||
"printWith": 80
|
||||
}
|
||||
24
README.md
Normal file
24
README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# vue2_frontend
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
3
babel.config.js
Normal file
3
babel.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
presets: ['@vue/cli-plugin-babel/preset']
|
||||
}
|
||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
19880
package-lock.json
generated
Normal file
19880
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
53
package.json
Normal file
53
package.json
Normal file
@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "vue2_frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.27.2",
|
||||
"bootstrap": "^5.2.0",
|
||||
"bootstrap-vue": "^2.22.0",
|
||||
"core-js": "^3.8.3",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
37
src/App.vue
Normal file
37
src/App.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<HeaderLayout />
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import HeaderLayout from '@/components/layout/HeaderLayout.vue'
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HeaderLayout
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
130
src/components/HelloWorld.vue
Normal file
130
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br />
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-cli documentation</a
|
||||
>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>babel</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>router</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>vuex</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>eslint</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
||||
>Forum</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
||||
>Community Chat</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
||||
>Twitter</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-router</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>vue-devtools</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-loader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>awesome-vue</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
7
src/components/__VLS_template.1.js
Normal file
7
src/components/__VLS_template.1.js
Normal file
@ -0,0 +1,7 @@
|
||||
export default (await import('vue')).defineComponent({
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
})
|
||||
const __VLS_template = () => ({})
|
||||
7
src/components/__VLS_template.js
Normal file
7
src/components/__VLS_template.js
Normal file
@ -0,0 +1,7 @@
|
||||
export default (await import('vue')).defineComponent({
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
})
|
||||
const __VLS_template = () => ({})
|
||||
45
src/components/layout/HeaderLayout.vue
Normal file
45
src/components/layout/HeaderLayout.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg bg-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/api/todo">Todo</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input
|
||||
class="form-control me-2"
|
||||
type="search"
|
||||
placeholder="통합검색"
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderLayout'
|
||||
}
|
||||
</script>
|
||||
18
src/main.js
Normal file
18
src/main.js
Normal file
@ -0,0 +1,18 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
|
||||
|
||||
// Import Bootstrap and BootstrapVue CSS files (order is important)
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(BootstrapVueIcons)
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
render: (h) => h(App)
|
||||
}).$mount('#app')
|
||||
38
src/router/index.js
Normal file
38
src/router/index.js
Normal file
@ -0,0 +1,38 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
|
||||
},
|
||||
{
|
||||
path: '/todo',
|
||||
name: 'TodoListView',
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "api", webpackPrefetch:true */ '../views/todo/listView.vue'
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
12
src/store/index.js
Normal file
12
src/store/index.js
Normal file
@ -0,0 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {},
|
||||
getters: {},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
modules: {}
|
||||
})
|
||||
5
src/views/AboutView.vue
Normal file
5
src/views/AboutView.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
18
src/views/HomeView.vue
Normal file
18
src/views/HomeView.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png" />
|
||||
<HelloWorld msg="Welcome to Your Vue.js App" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
</script>
|
||||
248
src/views/todo/listView.vue
Normal file
248
src/views/todo/listView.vue
Normal file
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
|
||||
<div>
|
||||
<b-container fluid>
|
||||
<b-row>
|
||||
<b-col> </b-col>
|
||||
<b-col>
|
||||
<b-form-group>
|
||||
<b-input-group>
|
||||
<label class="input-group-text">Filter</label>
|
||||
<b-form-input
|
||||
id="filter-input"
|
||||
v-model="filter"
|
||||
type="text"
|
||||
placeholder="Type to Filter"
|
||||
></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="!filter" @click="filter = ''"
|
||||
>Clear</b-button
|
||||
>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="input-group justify-content-end">
|
||||
<label class="input-group-text">줄수</label>
|
||||
<b-form-select
|
||||
v-model="perPage"
|
||||
:options="perPageOptions"
|
||||
></b-form-select>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="overflow-auto">
|
||||
<b-table
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:per-page="perPage"
|
||||
:current-page="currentPage"
|
||||
:filter="filter"
|
||||
:filter-included-fields="filterOn"
|
||||
:sort-by.sync="sortBy"
|
||||
:sort-desc.sync="sortDesc"
|
||||
:sort-direction="sortDirection"
|
||||
:busy="isBusy"
|
||||
:striped="striped"
|
||||
:hover="hover"
|
||||
:bordered="bordered"
|
||||
:dark="dark"
|
||||
:head-variant="headVariant"
|
||||
label-sort-asc=""
|
||||
label-sort-desc=""
|
||||
label-sort-clear=""
|
||||
@filtered="onFiltered"
|
||||
>
|
||||
<template v-slot:cell(selected)="row">
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="row.item.id"
|
||||
@change="checkedIdsToggle(row.item.id)"
|
||||
/>
|
||||
{{ row.item.id }}
|
||||
</template>
|
||||
<template #cell(index)="row">
|
||||
{{ total - (currentPage * perPage + row.index) + perPage }}
|
||||
</template>
|
||||
<template #table-busy>
|
||||
<div class="text-center text-danger my-2">
|
||||
<b-spinner class="align-middle"></b-spinner>
|
||||
<strong>Loading...</strong>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-pagination
|
||||
v-model="currentPage"
|
||||
:total-rows="total"
|
||||
:per-page="perPage"
|
||||
></b-pagination>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="input-group">
|
||||
<label class="input-group-text">DB</label>
|
||||
<input type="text" class="form-control" v-model="search" />
|
||||
<span class="input-group-text" @click="searchClick">검색</span>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<div class="input-group justify-content-end">
|
||||
<b-button @click="toggleBusy">Toggle Busy State</b-button>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 참조 : https://vuejsexamples.com/vuejs-tables-and-select-all-checkbox/
|
||||
import axios from 'axios'
|
||||
axios.defaults.baseURL = 'http://localhost:3000'
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
|
||||
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
fields: [
|
||||
{
|
||||
key: 'selected',
|
||||
label: ''
|
||||
},
|
||||
{ key: 'index', label: '번호' },
|
||||
{
|
||||
key: 'title',
|
||||
label: '타이틀',
|
||||
sortable: true,
|
||||
sortDirection: 'desc',
|
||||
filterByFormatted: true
|
||||
},
|
||||
{
|
||||
key: 'content',
|
||||
label: '내용',
|
||||
sortable: true,
|
||||
sortDirection: 'desc',
|
||||
filterByFormatted: true
|
||||
},
|
||||
{
|
||||
key: 'is_done',
|
||||
label: '사용여부',
|
||||
// formatter: (value, key, item) => {
|
||||
formatter: (value) => {
|
||||
return value ? 'Yes' : 'No'
|
||||
},
|
||||
sortable: true,
|
||||
sortByFormatted: true,
|
||||
filterByFormatted: true
|
||||
},
|
||||
// { key: 'updateAt', label: '수정일' },
|
||||
{
|
||||
key: 'createdAt',
|
||||
label: '登録日時',
|
||||
formatter: (value) => {
|
||||
return value.replace(
|
||||
/([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi,
|
||||
'$1-$2-$3'
|
||||
)
|
||||
},
|
||||
sortable: true
|
||||
// filterByFormatted: true
|
||||
}
|
||||
],
|
||||
total: 0,
|
||||
perPage: 5, // 페이지당 보여줄 갯수
|
||||
perPageOptions: [
|
||||
{ value: 5, text: '5줄' },
|
||||
{ value: 10, text: '10줄' },
|
||||
{ value: 15, text: '15줄' },
|
||||
{ value: 100, text: 'Show a lot' }
|
||||
],
|
||||
currentPage: 1, // 현재 페이지
|
||||
// 속성옵션
|
||||
striped: true,
|
||||
hover: true,
|
||||
bordered: true,
|
||||
dark: false,
|
||||
headVariant: 'null',
|
||||
isBusy: false,
|
||||
sortBy: 'id',
|
||||
sortDesc: false,
|
||||
sortDirection: 'asc',
|
||||
filter: null,
|
||||
filterOn: [],
|
||||
search: null,
|
||||
checkedIds: []
|
||||
}
|
||||
},
|
||||
setup() {},
|
||||
created() {},
|
||||
mounted() {
|
||||
// var vm = this
|
||||
// setTimeout(function () {
|
||||
// vm.records = vm.getDatas()
|
||||
// }, 1000)
|
||||
this.getDatas()
|
||||
this.total = this.items.length
|
||||
},
|
||||
unmounted() {},
|
||||
methods: {
|
||||
async getDatas() {
|
||||
this.isBusy = true
|
||||
const items = await axios
|
||||
.get('/todo/vue2', {
|
||||
params: {
|
||||
search: this.search
|
||||
}
|
||||
})
|
||||
.then((response) => {
|
||||
return response.status === 200 ? response.data : []
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
return []
|
||||
})
|
||||
//console.log(JSON.stringify(items.rows))
|
||||
this.total = items.total
|
||||
this.items = items.rows
|
||||
this.isBusy = false
|
||||
},
|
||||
searchClick() {
|
||||
this.currentPage = 1
|
||||
this.getDatas()
|
||||
},
|
||||
toggleBusy() {
|
||||
this.isBusy = !this.isBusy
|
||||
},
|
||||
onFiltered(filteredItems) {
|
||||
// Trigger pagination to update the number of buttons/pages due to filtering
|
||||
this.total = filteredItems.length
|
||||
this.currentPage = 1
|
||||
},
|
||||
checkedIdsToggle(id) {
|
||||
//console.log(this.checkedIds)
|
||||
if (!this.checkedIds.includes(id)) {
|
||||
this.checkedIds.push(id)
|
||||
} else {
|
||||
this.checkedIds = this.checkedIds.filter((e) => e !== id)
|
||||
}
|
||||
console.log(this.checkedIds)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sortOptions() {
|
||||
// Create an options list from our fields
|
||||
return this.fields
|
||||
.filter((f) => f.sortable)
|
||||
.map((f) => {
|
||||
return { text: f.label, value: f.key }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
@ -0,0 +1,4 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user