函数后的条件渲染 - VueJS [重复]答案

【问题标题】：Conditional rendering after function - VueJS [duplicate]函数后的条件渲染 - VueJS [重复]
【发布时间】：2021-05-28 17:23:39
【问题描述】：

我目前正在编写一个用于发送电子邮件的模板，并且在函数之后我想有条件地呈现一个成功或错误块。由于某种原因，它不起作用。该函数本身正在运行，但是不会呈现成功或错误块。请在下面找到我的代码。

模板：

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

功能：

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

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

【问题讨论】：

使用 :key 和 v-else
我应该为 :key 赋予什么价值？
负责更改/渲染元素的变量。但请注意不要对多个元素使用重复键。试试我的答案。

标签： vue.js

【解决方案1】：

您确定调用了您的成功/错误处理程序吗？/
在您的方法 sendEmail 中，您应该定义没有箭头函数的定义

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

【讨论】：

1.是的，在控制台打印日志 2.好的，我改一下，谢谢
好的，我认为箭头函数可能是问题所在，现在看起来好多了。但为什么呢？
@coffee-and-code 因为 VueJS 使用它来引用组件。当您编写箭头函数时，您会丢失 this
@BabacarCisséDia this 在那里可以正常工作。箭头函数获取它定义的地方的上下文，所以这个箭头函数将获取 sendEmail 上下文。如果您通过function() {}，它将有自己的上下文错误this
@coffee-and-code 那里最好使用箭头函数。

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

我认为您只需要对错误块使用严格比较喜欢：

success === false

!success 可能存在问题，因为null 和false 都是true。

您也可以使用string 代替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>

【讨论】：