在模板内的 vuejs 组件中导入和使用类

Posted 2023-02-23

【中文标题】在模板内的 vuejs 组件中导入和使用类

【英文标题】：Import and use class in vuejs component inside template

【发布时间】：2019-03-28 05:50:27

【问题描述】：

我正在开发一个 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>

EditUser.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>

error.js：

export class Errors 
    constructor() 
        this.errors = ;
    

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

【问题讨论】：

v-text="errors.get('name')" 正在寻找一个名为 errors 的 vue 数据类型。您的导入是空白导入。它没有被任何东西引用

@Varcorb 是的，我想，你会说我需要在数据返回中调用它吗？我该怎么做？

试试你的return user: JSON.parse(this.userArray),errors: Errors

@Varcorb 我之前试过，它给了我这个错误“渲染错误：“TypeError：_vm.errors.get 不是函数”

【参考方案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访问。 Here 是帮助创建自定义插件的众多文章之一。

根据当前实现试图达到的目标，可能有更好的选择，例如 mixins 或可重复使用的错误/警报组件，可以处理错误响应。

【讨论】：

谢谢，这有效。感谢您提供有关如何以不同方式处理此问题的其他文档和想法。