如何在按钮标签中添加条件? (vue.js 2)
我的组件的代码是这样的:如何在按钮标签中添加条件? (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" data-dismiss="modal">Close</button>
状态值(见计算)
我尝试这样的:
<button type="button" class="btn btn-default" {{ status == 'success' ? @click="reloadProduct" : data-dismiss="modal"}}>
Close
</button>
但是,这是行不通的
我该怎么办?
不能绑定动态事件监听器,
,但你可以创建另一个功能并检测这样的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');
。
我在doSomething方法中做'console.log(this.status)',result = null。结果是成功还是失败 –
您是否已经将'status'设置为'false'或'true'? –
现在,它已经解决了。谢谢 –
这可能不是最好的答案,但它是一种解决方法。
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");
请注意,当您使用Vue.js时,不应该使用jQuery修改DOM。修改DOM后,Vue.js将不会重新绑定事件侦听器。 –
你最好检查单击处理程序函数的条件。要么继续或关闭模态。 –