单击按钮后更新 b 字段消息

Question

我是 Vue 的新手，我正在尝试做一件简单的事情，即在单击按钮后在 b-field 中显示结果。

下面是我的Login.vue代码

<template>
    <section id="login">
        <h1>Login</h1>
        <b-field label=""
            type="is-warning"
            message="Please enter a valid email">
            <b-input type="email" name="email" v-model="input.email" placeholder="E-mail"></b-input>
        </b-field>
        <b-field label=""
            type="is-warning"
            message="Please enter your password">
            <b-input type="password" name="password" v-model="input.password" placeholder="Password"></b-input>
        </b-field>
        <b-field message="hohoho"
            type="is-danger"
            name="result"
            >
            <button type="button" v-on:click="login()" class="button">Login</button>
        </b-field>
    </section>
</template>

<script>
    export default {
        name: 'Login',
        data () {
            return {
                input: {
                    email: "",
                    password: ""
                }
            }
        },
        methods: {
            login () {
                if(this.input.email != "" && this.input.password != "") {
                    if(this.input.email == this.$parent.mockAccount.email && this.input.password == this.$parent.mockAccount.password) {
                        this.$emit("authenticated", true)
                        this.$router.replace({ name: "secure" })
                    } else {
                        this.result = "The email and / or password is incorrect"
                        console.log("The email and / or password is incorrect")
                    }
                } else {
                    this.result = "An email and password must be present"
                    console.log("An email and password must be present")
                }
            }
        }
    }
</script>

我在更新名称为 result 的 b-field 的内容时遇到问题... this.result 没有更新 b-field 的内容。

Answer 1

我猜你想更新这个元素的 message 属性？

<b-field message="hohoho"
            type="is-danger"
            name="result">
            <button type="button" v-on:click="login()" class="button">Login</button>
</b-field>

如果我是正确的，您只需将 result 属性绑定到 message 属性，如下所示：

<b-field :message="result"
            type="is-danger"
            name="result">
            <button type="button" v-on:click="login()" class="button">Login</button>
</b-field>

注意 :message="result"，它是 v-bind:message="result" 的快捷方式。

另外，非常重要，你需要在数据中定义result属性

data () {
    return {
        input: {
            email: "",
            password: ""
        },
        result: ""
    }
},

更多信息here

单击按钮后更新 b 字段消息

Update b-field message after button click

vue.js

buefy