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

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 覆盖计算的属性

how to override a computed property through $emit in vuejs

vue.js

vuejs2

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

how to override a computed property through $emit in vuejs

vue.js

vuejs2

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