Question

我有一个表格，其中有几个输入的组合，并且每个组合中都有另一个错误组合，所以我有

// input comp
<template></template>

<script>
    import Store from '../../store'

    export default {
        props:['errors'],
        data() {
            return {
                input: ''
            }
        },
        computed: {
            showError() {
                if (this.errors && !this.input) {
                    return true;
                }
            }
        }
    }
</script>

// error comp
<template>
    <span class="help-block">
        <strong v-for="error in errors">
            {{ error }}
        </strong>
    </span>
</template>

<script>
    export default {
        props: ['errors'],
        watch: {
            errors: (val) => {
                this.$emit('newError')
            }
        },
    }
</script>

// display the error
<form-errors :errors="errors" v-if="showError" v-on:newError="showError = !showError"></form-errors>

所以接下来是什么

让error watch实际工作到目前为止我还不知道如何挂钩组件更新
如何覆盖showError

Answer 1

不，你不能像这样覆盖计算属性：showError = !showError，你必须使用其他方法。

鉴于您要显示两个错误：与表单输入相关的错误和来自后端的错误：您可以使用以下错误变量结构：

errors: { 
  "backendErrors": [], 
  "formErrors" : [] 
}

现在您可以让您的计算属性显示如下错误：

showError() { 
   if (this.errors.backendErrors || (this.errors.formErrors && !this.input) ) { 
      return true; 
   } 
   else{
      return false
   }
}

不管你有什么其他逻辑。

如何通过vuejs中的$ emit覆盖计算属性

1 个答案: