在模板內的 vuejs 組件中導入和使用類

Question

我正在使用 vuejs/laravel 表單來更新用戶設置。 經過一番掙扎，我不在驗證處理中。 我正在使用 laravel 返回驗證在輸入字段下方添加錯誤消息以查找錯誤。 它的返回方式要求我以某種方式處理我“得到”錯誤的方式。

我的問題是我似乎無法找到如何在我的組件中導入一個類並從模板中使用它。 正如您在 EditUser.vue 中看到的，我試圖通過導入的類作為v-text="errors.get('name')"獲取錯誤

因此，任何人都可以幫助我如何改變我對此的方法或使我正在從事的工作正常工作。

edit.blade.php：

<edit-user-form user-array="{{ $user }}" 
route="{{ route('user.update', $user) }}"></edit-user-form>

編輯用戶.vue：

<template>
  <form method="POST" action="update" @submit.prevent="onSubmit">
     <input id="name" type="text" name="name" v-model="user.name">
       <span class="invalid-feedback" role="alert">
         <strong v-text="errors.get('name')"></strong>
     </span>
  </form>
</template>

<script>
import {Errors} from '../errors.js';
export default {
    props: ['userArray', 'route'],
    data() {
        return {
            user: JSON.parse(this.userArray)
        }
    },
    methods: {
        onSubmit() {
            axios.post(this.route, this.user)
                .then(response => alert('Success'))
                .catch(error => Errors.record(error.response.data));
        }
    }
};
</script>

錯誤.js：

export class Errors {
    constructor() {
        this.errors = {};
    }

    get(field) {
        if (this.erros[field]) {
            return this.errors[field][0];
        }
    }
    record(errors) {
        this.errors = errors;
    }
}

Answer 1

單個文件組件的template標簽中使用的所有變量，當被 Vue 解釋時，基本上都是以this為前綴的。 因此，為了使某些變量可訪問，我們必須將它們附加到當前組件的實例。

大多數情況下的簡單解決方案，特別是，如果它是本地/很少使用的變量，則將Errors類分配給組件的data選項：

data () {
   return {
      user: JSON.parse(this.userArray),
      errors: new Errors()
   }
},
methods: {
    onSubmit() {
        axios.post(this.route, this.user)
            .then(response => alert('Success'))
            .catch(error => this.errors.record(error.response.data));
    }
}

我在那里放置了new關鍵字，因為如果每個組件都將使用它自己的Errors類實例，那么這個實現是有意義的。

如果目標是在應用程序中共享Errors類並訪問錯誤包，則可以將其添加到Vue.prototype並從任何組件通過this訪問。 這是幫助創建自定義插件的眾多文章之一。

根據當前實現試圖實現的目標，可能有更好的選擇，例如mixin或可重用的錯誤/警報組件，可以處理錯誤響應。