Buefy 字段对 :message 参数更改没有反应

Question

我有一个带有 Buefy 组件的 Nuxt 项目。有一个带有一些字段组件的表单，它应该根据该组件的消息参数对错误做出反应。但是没有。我可以在调试器中看到正确的值，但组件不显示消息。 :message 属性应该像 first email example from documentation

中的那样工作

代码如下：

<template #company>
    <h2 class="title">{{ $t('general.login.create_company') }}</h2>
    <b-field
        :type="loginErrors.company_name ? 'is-danger' : ''"
        :message="loginErrors.company_name ? loginErrors.company_name : ''"
    >
        <b-input
                v-model="companyName"
                name="company_name"
                type="text"
                autocomplete="off"
                :placeholder="$t('general.login.create_company')"
        ></b-input>
    </b-field>
    <div class="buttons is-centered">
        <b-button type="is-primary is-light" @click="createCompany">Save</b-button>
    </div>
</template>

...

data() {
    return {
        ...
        loginErrors: {},
        error: 'aaaaaa',
    };
},
...
async createCompany() {
    const result = await this.$api.users.createCompany({company_name: this.companyName});

    if( result.error ) {
        this.loginErrors.company_name = result.error;  // This does not work although the variable has correct value set
        this.error = result.error;  // This works fine
        return false;
    }
},

我在其他组件中使用了这个模式并且它有效。我不明白。感谢您的帮助。

Answer 1

我认为 Vue 组件不会以直接方式对对象属性做出反应，您可以尝试 this.$set(this.loginErrors, 'company_name', result.error); 而不是 this.loginErrors.company_name = result.error;

仅供参考： https://v2.vuejs.org/v2/guide/reactivity.html?redirect=true#Change-Detection-Caveats

Answer 2

change detection of data objects in Vue is shallow (top level only)

在 vue.js 中，动态添加属性到对象不是反应性的。相反，我们可以分配一个完整的对象，以便进行更改检测。

为了更好地理解，请阅读 Vue 官方 documentation。

演示：

new Vue({
  el: '#app',
  data() {
    return {
      loginErrors: {}
    }
  },
  mounted() {
    this.loginErrors = {
      company_name: 'some value'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p>{{ loginErrors.company_name ? 'is-danger' : 'no-danger' }}</p>
</div>

Answer 3

这种情况下的解决方案是将 Buefy 版本从 0.4.11 更新到 0.4.21。这解决了这个问题。另一件事是 :type 与分组参数结合使用会导致新问题。

Buefy 字段对 :message 参数更改没有反应

Buefy field does not react on :message param change

javascript

components

vue.js

buefy