Question

我有一些带有惊人图标的导航按钮。 “上一个”具有向左的箭头。 “下一个”具有向右箭头。当按其原始顺序放置时，一切都会按预期进行。重新排列按钮时，“上一个”向左箭头图标会翻转为朝右。我尝试使用不同的图标（雪佛龙左/右），并且得到相同的行为。

这是我不知道的正常行为，还是错误，还是其他完全没有的东西？

订单1：

        <button v-if="showPrev()" class="col-md-2 mb-3 btn btn-outline-info" @click="prev()"><i class="icon-large fas fa-arrow-left"></i>  PREV </button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

        <button v-if="showSubmit()" class="col-md-2 mb-3 btn btn-success" @click="next()"> SUBMIT  <i class="icon-large fas fa-check"></i></button>
        <button v-else-if="showFinish()" class="col-md-2 mb-3 btn btn-outline-danger" @click="finish()"> FINISH  <i class="icon-large fas fa-check"></i></button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

        <button v-if="showNext()" class="col-md-2 mb-3 btn btn-outline-info" @click="next()"> NEXT  <i class="icon-large fas fa-arrow-right"></i></button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

Output 1

第2步：

        <button v-if="showPrev()" class="col-md-2 mb-3 btn btn-outline-info" @click="prev()"><i class="icon-large fas fa-arrow-left"></i>  PREV </button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

        <button v-if="showNext()" class="col-md-2 mb-3 btn btn-outline-info" @click="next()"> NEXT  <i class="icon-large fas fa-arrow-right"></i></button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

        <button v-if="showSubmit()" class="col-md-2 mb-3 btn btn-success" @click="next()"> SUBMIT  <i class="icon-large fas fa-check"></i></button>
        <button v-else-if="showFinish()" class="col-md-2 mb-3 btn btn-outline-danger" @click="finish()"> FINISH  <i class="icon-large fas fa-check"></i></button>
        <!-- Spacer --><div v-else class="col-md-2"></div>

Output 2

MCVE尝试：（如此精美的字体图标不会显示在SO片段中，因此无法复制。如果我缺少某些内容，请发表评论并进行编辑）

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="card p-0 mt-5">
  <div class="row pt-3">
    <div class="col-md-3"></div>

    <button class="col-md-2 mb-3 btn btn-outline-info"><i class="icon-large fas fa-arrow-left"></i>  PREV </button>

    <button class="col-md-2 mb-3 btn btn-outline-info"> NEXT  <i class="icon-large fas fa-arrow-right"></i></button>

    <button class="col-md-2 mb-3 btn btn-success"> SUBMIT  <i class="icon-large fas fa-check"></i></button>

    <div class="col-md-3"></div>
  </div>
</div>

Answer 1

问题出在'vue-if'语句上。当vue-if失败且未显示按钮时，下一个要呈现的按钮将显示由于vue-if而未显示的图标。

只需将按钮/图标组合包装在div中，然后在其中执行vue-if检查即可解决问题。

        <div v-if="showPrev()" class="col-md-2 mb-3 ">
            <button class="btn btn-lg btn-outline-info" @click="prev()"><i class="icon-large fas fa-arrow-left"></i>  PREV </button>
        </div>

如果移动了代码，字体真棒Vue图标就会翻转

1 个答案: