Conditional rendering after function - VueJS

Question

I am currently writing a template for sending an email and after the function I want to conditionally render a success or error block. For some reason it is not working. The function itself is working, however neither success or error block is rendered. Please find my code below.

Template:

<form v-if="success==null" @submit.prevent="sendEmail" >
     ... //form code
    <input name="submit" type="submit" class="btn" value="send" />                                        
</form>
<b-alert variant="success" v-if="success">success</b-alert>
<b-alert variant="error" v-if="!success">error</b-alert>

Function:

   data() {
        return {
            success: null
        }
    },
    methods: {

    sendEmail: (e) => {
        ... // request code
        .then((result) => {
            this.success=true
            console.log('success')
        }, (error) => {
            this.success=false
            console.log('error')
        })
    }
}

the variable that's responsible for changing/rendering the elements. But be careful to not use duplicate keys for more than one element. Try my answer. — Beshambher Chaukhwan, Feb 26 '21 at 10:30

Asimple · Answer 1 · 2021-02-26T10:44:21.120

I think you just need to use strict comparing for error block like:

success === false

There can be problems with !success because it's true for both null and false.

Also you can use string instead of boolean|null

var app = new Vue({
  el: '#app',
  data: {
    type: 'form',
    formData: {
      email: '',
    }
  },
  methods: {
    sendEmail() {
      if (this.formData.email) {
        this.type = 'success';
      } else {
        this.type = 'error';
      }

      setTimeout(() => this.type = 'form', 10000);
    }
  }
})

.success {
  color: green;
}

.error {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <form v-if="type === 'form'" @submit.prevent="sendEmail">
    <input type="email" v-model="formData.email" />
    <button type="submit">Submit</button>
  </form>

  <div v-if="type === 'success'" class="success">Success!</div>
  <div v-if="type === 'error'" class="error">Error!</div>
</div>

score 2 · Answer 2 · answered Feb 26 '21 at 10:27

2

Are you sure your success/error handler are called ?/
In your method sendEmail you should define define it without an arrow function

sendEmail (e) {
       ... // request code
       .then((result) => {
           this.success=true
           console.log('success')
       }, (error) => {
           this.success=false
           console.log('error')
       })
   }

answered Feb 26 '21 at 10:27

Babacar Cissé Dia

395
1
5

1

1.Yes, the logs are printed in the console 2. Okay, I'll change it, thanks – coffee-and-code Feb 26 '21 at 10:28
1

Okay I think the arrow function could have been the problem, it looks better now. But why? – coffee-and-code Feb 26 '21 at 10:30
1

@coffee-and-code because VueJS use this to refer to the component. When you write an arrow function you lose the this – Babacar Cissé Dia Feb 26 '21 at 10:33
@BabacarCisséDia `this` will work fine there. Arrow function gets context of the place where it's defined, so this arrow function will get sendEmail context. If you'll pass `function() {}` it'll have it's own context with wrong `this` – Asimple Feb 26 '21 at 12:13
@coffee-and-code It's better to use arrow functions there. – Asimple Feb 26 '21 at 12:15

score 2 · Answer 3 · answered Feb 26 '21 at 10:28

2

Try this

<b-alert :variant="success ? 'success' : 'error'" v-if="success!=null" :key="success">
   <span v-if="success">success</span>
   <span v-else>error</span>
</b-alert>

answered Feb 26 '21 at 10:28

Beshambher Chaukhwan

1,418
2
9
13

Conditional rendering after function - VueJS

3 Answers3