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

我的组件代码如下所示：

    ...
    <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" {{ status == 'success' ? @click="reloadProduct" : data-dismiss="modal"}}>
    Close 
</button>

。。。
接近
...
从“vuex”导入{mapGetters}
导出默认值{
道具：['idProduct']，
计算：{
…地图绘制者([
“地位”
])
},
...

我希望在按钮标记中添加条件。因此，当status=success时，按钮如下所示：

    ...
    <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" {{ status == 'success' ? @click="reloadProduct" : data-dismiss="modal"}}>
    Close 
</button>

关闭

当status=failure时，按钮如下所示：

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

关闭

从脚本标记组件获取的状态值（请参见计算）

我试着这样：

    ...
    <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" {{ status == 'success' ? @click="reloadProduct" : data-dismiss="modal"}}>
    Close 
</button>

接近

但是，它不起作用

---

我该怎么做？

您不能动态绑定事件侦听器

但是您可以创建另一个函数并检测

成功

状态，如下所示：

<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>

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

关闭
从“vuex”导入{mapGetters}
导出默认值{
道具：['idProduct']，
计算：{
…地图绘制者([
“地位”
])
},
方法：{
剂量测定法（evt）{
如果（this.status==“success”）{
//当状态为“成功”时调用reloadProduct（）。
重新加载产品（）
//删除按钮的“数据解除”属性。
evt.target.removeAttribute（“数据解除”）
}否则{
//为按钮添加“数据解除”属性。
evt.target.setAttribute（“数据解除”、“模态”）
//如果要关闭模式，请取消对此的注释。
//$（'#model'）。model（'hide'）；
}
}
}
...

---

EDIT：似乎要关闭引导模式，然后可以在

doSomething（）

函数中取消注释

$（“#model”）.model（'hide'）；

。

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

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

---

请小心，在使用Vue.js时不应使用jQuery修改DOM。修改DOM后，Vue.js不会重新绑定事件侦听器。最好检查单击处理程序函数中的条件。要继续或关闭模式，请执行

console.log（this.status）

在doSomething方法中，结果=null。结果是成功还是失败