Question

我正在使用vuejs2作为我的webapp和bootstrap。

我有两个v-if和v-else的块，所以只有其中一个渲染。我在每个块中都有引导按钮。当我从div的第一个按下按钮时，第二个div变为可见，反之亦然。

问题是当我点击第一个div的按钮时，第二个div的按钮出现，但是仍然是聚焦的，我想要一个普通的按钮，但是它是用轮廓聚焦的。

以下是简化代码：

<div id="app"> 
    <div v-if="switc">
      <button type="button" class="btn btn-secondary" @click="switc = !switc">
        <span >First</span>
      </button>
   </div>
   <div v-else>
    <button type="button" class="btn btn-secondary">
        <span>Second</span>
      </button>
   </div>
   <br>   <br>
   <button type="button" class="btn btn-secondary" @click="switc = !switc">
     <span>Switch</span>
   </button>
</div>

这是工作fiddle，如果按第一个按钮，第二个仍显示轮廓。

Answer 1

我错过了这个：文档中的key in v-if/else。 Vue尝试尽可能高效地渲染元素，通常重新使用它们而不是从头开始渲染。在我的情况下，似乎它使用相同的组件并完全重新渲染它。

要解决此问题，我只需在每个按钮中添加key字段，如下所示：

    <div v-if="switc">
      <button type="button" class="btn btn-secondary" @click="switc = !switc" key="first">
        <span >First</span>
      </button>
   </div>
   <div v-else>
    <button type="button" class="btn btn-secondary" key="second">
        <span>Second</span>
      </button>
   </div>

更新了小提琴here。

vue v-if / v-else不会从按钮中删除样式

1 个答案: