Update b-field message after button click - vue.js

Question

I'm very new in Vue, and I'm trying to do a simple thing of displaying the result in a b-field after clicking a button.
Below is my Login.vue code
<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>
I have problem updating the content of the b-field with name result... the this.result doesn't update the content of the b-field.

Answer 1

I guess you want to update the message attribute of this element?
<b-field message="hohoho"
type="is-danger"
name="result">
<button type="button" v-on:click="login()" class="button">Login</button>
</b-field>
If I am correct you just need to bind the result prop to the message attribute like this:
<b-field :message="result"
type="is-danger"
name="result">
<button type="button" v-on:click="login()" class="button">Login</button>
</b-field>
Notice the :message="result", it's a shortcut for v-bind:message="result".
Also, very important, you need to define the result prop in data
data () {
return {
input: {
email: "",
password: ""
},
result: ""
}
},
More info here