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

【问题标题】：how to override a computed property through $emit in vuejs如何通过 vuejs 中的 $emit 覆盖计算属性
【发布时间】：2017-01-01 17:59:14
【问题描述】：

我有一个表单，其中有几个输入补偿，每个内部都有另一个补偿错误，所以我有

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

【问题讨论】：

你能为此做一个小提琴吗？
我正在使用刀片进行模板化，并使用 3 个组合来存储孩子和父母之间的数据，所以制作小提琴不会那么容易，但是你可以问我有什么不清楚的地方。

标签： vuejs2 vue.js

【解决方案1】：

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

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

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

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

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

没有其他任何适合你的逻辑。

【讨论】：