目錄

• VUE 筆記
  • 目錄
  • 表單驗證
  • Vuetify
  • 上傳檔案圖片預覽
  • 陣列操作
    • VUE
      • 移除元素
  • router 動態讀入component
  • vuetify snackbar 全局通知
• laravel sanctum AUTH
• vuetify data table 的細節設定方式:
  • Build
  • try catch 錯誤訊息
  • vuetify
    • data table 的 slot 問題

表單驗證

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>