目錄
表單驗證
vee validate
https://vee-validate.logaretm.com/v3
npm install vee-validate –save
Vuetify
需將物件放置在 <v-app></v-app>
內,此標籤應在app.vue內(根檔案)
上傳檔案圖片預覽
preview(files) {
this.files = files;
forEach(this.files, (value, index) => {
value.previewURL = URL.createObjectURL(value);
});
},
陣列操作
VUE
移除元素
removeFile(arrayIndex) {
this.$delete(this.files, arrayIndex);
// this.files.splice(arrayIndex, 1);
},
router 動態讀入component
component: () => import("@/views/v1/SaleIndex"),
vuetify snackbar 全局通知
snackbar.vue
<template>
<v-snackbar v-model="active" :timeout="timeout" :color="color">
{{ text }}
</v-snackbar>
</template>
<script>
export default {
data() {
return {
active: false,
timeout: 2000,
color: "success",
text: "",
};
},
created() {
this.$store.subscribe((mutation, state) => {
if (mutation.type === "show") {
this.text = state.snackbar.text;
this.color = state.snackbar.color;
this.active = true;
this.timeout = state.snackbar.timeout;
}
});
},
};
</script>
store/snackbar.js
export default {
state: {
active: false,
color: "success",
text: "",
timeout: 2000,
},
mutations: {
show(state, payload) {
(state.active = payload.active),
(state.color = payload.color),
(state.text = payload.text),
(state.timeout = payload.timeout);
},
test() {
console.log("test");
},
},
};
store/index.js
import snackbar from "./snackbar";
...
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {
auth,
snackbar
},
});
usage:
app.vue
<snackbar></snackbar>
...
import snackbar from "@/components/UI/snackbar";
...
components: {
snackbar,
},
foo.vue
this.$store.commit("show", {
color: "success",
text: "連線成功",
});
laravel sanctum AUTH
當用sanctum要取得auth資料時,一定要用middleware代入sanctum
Route::group(["middleware" => ["auth:sanctum"], 'prefix'=>'orz'], function () {
Route::get('projects', [ProjectController::class, 'index']);
});
#vuetify data table 的 chip
<v-data-table :headers="headers" :items="sales">
<template v-slot:[`item.Result`]="{ item }">
<v-chip dark :color="item.Result == 'Success' ? 'success' : 'red'">
{{ item.Result }}
</v-chip>
</template>
</v-data-table>
vuetify data table 的action 設定範例:
<v-data-table :headers="headers" :items="items">
<template v-slot:[`item.actions`]="{ item }">
<v-btn
class="mx-2"
fab
outlined
dark
x-small
color="primary"
@click="editItem(item)"
>
<v-icon dark>mdi-pencil</v-icon>
</v-btn></template
>
</v-data-table>
//別忘了header要加actions
headers: [
{ text: "使用者名稱", value: "name" },
{ text: "mail", value: "email" },
{ text: "角色", value: "permission.name" },
{ text: "動作", value: "actions" },
],
vuetify data table 的細節設定方式:
<v-data-table :headers="headers" :items="items">
<template v-slot:item="row">
<tr>
<td>{{ row.item.name }}</td>
<td>{{ row.item.description }}</td>
<td>
<v-btn
class="mx-2"
fab
dark
small
color="pink"
@click="onButtonClick(row.item)"
>
<v-icon dark>mdi-heart</v-icon>
</v-btn>
</td>
</tr>
</template>
</v-data-table>
Build
Vue Router build 到前端上若要利用caddy作為SERVER需要作一些設定
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
(直接如下設定在caddyfile內,不用改東西)
try_files {path} /
try catch 錯誤訊息
try {
const { data } = await apis.createSale(setting.AssetNo, saleData);
console.log(data);
} catch (error) {
console.log(error.response.data.message);
}
vuetify
data table 的 slot 問題
在用 eslint 時,data table 的 slot 功能會報錯
要去設定值
"vue/valid-v-slot": ["error", { "allowModifiers": true}]
若不好設定,也可以直接將 vue 語法改成:
<template v-slot:[`item.payment_info`]="{item}">
{{item.payment_info.status}}
</template>