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

Posted 2023-02-22

【中文标题】函数后的条件渲染 - VueJS [重复]

【英文标题】：Conditional rendering after function - VueJS [duplicate]

【发布时间】：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 赋予什么价值？

负责更改/渲染元素的变量。但请注意不要对多个元素使用重复键。试试我的答案。

【参考方案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>