在 v-if 和 else 条件内给出 btn-next 时不起作用？

Posted 2023-02-22

【中文标题】在 v-if 和 else 条件内给出 btn-next 时不起作用？

【英文标题】：btn-next is not working when given inside a v-if and else condition?

【发布时间】：2018-06-16 00:35:08

【问题描述】：

我正在为我的项目使用 vue js 和 html，并且正在注册。所以，我的标签很少。进入下一个选项卡“btn-next”是需要的类。但是，只有当我收到的 json 响应为真时，我才需要移动到下一个选项卡。

所以，我将我的 html 修改为

<div class="wizard-footer">
  <div class="pull-right">
    <div v-if="response.status == false">
      <button type="submit" class='btn btn-primary'>Submit Again</button></div>
    <div v-if="response.status == true">
      <button type="submit" class='btn btn-next btn-primary'>Next</button></div>
    <div v-else>
      <button type="submit" class='btn btn-primary'>Submit</button>
    </div>
  </div>
</div>

但是当我尝试这种方式时..我无法移动到下一个标签？谁能帮我解决一下..

我能够获得响应并在不同的条件下移动，但我无法移动到下一个选项卡。这意味着当我在 div 中给出时，btn-next 不起作用。所以，请帮我找出解决办法。

我的详细代码是

<div class="tab-pane" id="step2">
  <form method="POST" id="form1" v-on:submit.prevent="handleSubmit($event);">
    <div class="row p-b-15  ">
      <div class="row">
        <div class="col-sm-12">
          <div class="col-sm-6">
            <div class="form-group">
              <label>Contact Name :</label>
              <input name="cname" type="text" class="form-control" id="cname" placeholder="Contact Name" required="required" v-model="cname" />
            </div>
          </div>
        </div>
      </div>
      <div class="wizard-footer">
        <div class="pull-right">
          <div v-if="response.status == false"><button type="submit" class='btn btn-next btn-primary'>Next</button></div>
          <div v-if="response.status == true"><button type="submit" class='btn btn-next btn-primary'>Next</button></div>
          <div v-else>
            <button type="submit" class='btn btn-primary'>Next</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

我的 vue js 代码

submitBox = new Vue(
  el: "#submitBox",

  handleSubmit: function(e) 
    var vm = this;
    data = ;
    data['name'] = this.cname;
    data['pid'] = this.pid;
    $.ajax(
      url: 'hpost/contact/',
      data: data,
      type: "POST",
      dataType: 'json',
      success: function(e) 
        if (e.status) 
         vm.response = e;
          console.log(vm.response);
          alert("Registration Success")

         else 
          vm.response = e;
          console.log(vm.response);
          alert("Registration Failed")
        
      
    );
    return false;
  ,

【问题讨论】：

您是否在控制台中遇到任何错误？也许response 最初是null？

没有错误先生。最初我会去 v-else 条件

您能否澄清一下“我能够获得响应并在不同的条件下移动，但我无法移动到下一个选项卡”？您的标签代码/模板在哪里？你是如何处理按钮点击的（你有<form @submit.prevent="...">吗？）。

我会更新我的代码先生

先生，我更新了我的代码

【参考方案1】：

案例一：

如果按钮呈现正确，请检查您的网络服务器的后端代码。我发现您正在渲染一个带有两个“提交”按钮的表单，可能后端不知道您的期望是哪个提交。

当response.status == false: 再次提交和提交时呈现

当response.status == true: 渲染下一个

不过都是普通的提交按钮，你的后台或者handleSubmit知道吗？

案例 2：

如果按钮未正确呈现，请检查您的 JSON 结构和 vue 语法。