如何在按钮标签中添加条件？ （vue.js 2）

Question

我的组件的代码是这样的：

... 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    ... 
    <script> 
     import { mapGetters } from 'vuex' 
     export default{ 
      props:['idProduct'], 
      computed: { 
       ...mapGetters([ 
        'status' 
       ]) 
      }, 
      ... 
    </script> 

我想在按钮标记添加条件。所以，当状态=成功，该按钮看起来是这样的：

<button type="button" class="btn btn-default" @click="reloadProduct">Close</button> 

当状态=失败，该按钮看起来是这样的：从脚本标签组件所

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

状态值（见计算）

我尝试这样的：

<button type="button" class="btn btn-default" {{ status == 'success' ? @click="reloadProduct" : data-dismiss="modal"}}> 
    Close 
</button> 

但是，这是行不通的

我该怎么办？

Answer 1

不能绑定动态事件监听器，

，但你可以创建另一个功能并检测这样的success状态：

<button type="button" class="btn btn-default" @click="doSomething">Close</button> 

<script> 
    import { mapGetters } from 'vuex' 
    export default { 
     props:['idProduct'], 
     computed: { 
      ...mapGetters([ 
       'status' 
      ]) 
     }, 
     methods: { 
      doSomething(evt) { 
       if (this.status === "success") { 
        // Call the reloadProduct() when the status is `success`. 
        reloadProduct() 
        // Remove the `data-dismiss` attribute of the button. 
        evt.target.removeAttribute("data-dismiss") 
       } else { 
        // Add the `data-dismiss` attribute for the button. 
        evt.target.setAttribute("data-dismiss", "modal") 
        // Uncomment this if you're trying to close the modal. 
        // $('#modal').modal('hide'); 
       } 
      } 
     } 
     ... 
</script> 

编辑：好像你要关闭的引导模式，那么您可以在doSomething()函数中取消注释$('#modal').modal('hide');。

Answer 2

这可能不是最好的答案，但它是一种解决方法。

if (status === success) { 
    document.getElementById("yourDivHere").innerHTML = 
    '<button type="button" class="btn btn-default" @click="reloadProduct"> 
     Close 
    </button>' 
}; 

和

if (status === success) { 
    document.getElementById("yourDivHere").innerHTML = 
    '<button type="button" class="btn btn-default" data-dismiss="modal"> 
     Close 
    </button>' 

更具体地说，你可以使用jQuery这样的：

$(this).attr("your attribute", "your value");