代码之家  ›  专栏  ›  技术社区  ›  imin

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

  •  0
  • imin  · 技术社区  · 7 年前

    我是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>
    

    我无法更新 b场 有名字的 result ... 这个 this.result b场 .

    1 回复  |  直到 7 年前
        1
  •  2
  •   Allkin    7 年前

    我想你想更新 消息 这个元素的属性?

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

    结果 支持 像这样的属性:

    <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" .

    您需要在数据中定义结果属性

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

    here

    推荐文章