Reputation: 13202
My component code is like this :
...
<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>
I want add condition in button tag. So when status = success, the button looks like this :
<button type="button" class="btn btn-default" @click="reloadProduct">Close</button>
When status = failure, the button looks like this :
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
Status values taken from the script tag component (See computed)
I try like this :
<button type="button" class="btn btn-default" {{ status == 'success' ? @click="reloadProduct" : data-dismiss="modal"}}>
Close
</button>
But, it does not work
How can I do it?
Upvotes: 2
Views: 1291
Reputation: 1908
You cannot bind the event listener dynamically,
but you can create another function and detect the success
status like this:
<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>
EDIT: Seems like you want to close the Bootstrap modal, then you can uncomment $('#modal').modal('hide');
in the doSomething()
function.
Upvotes: 1
Reputation: 317
This might not be the best answer but it's a workaround.
if (status === success) {
document.getElementById("yourDivHere").innerHTML =
'<button type="button" class="btn btn-default" @click="reloadProduct">
Close
</button>'
};
and
if (status === success) {
document.getElementById("yourDivHere").innerHTML =
'<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>'
More specifically, you could use jQuery like this:
$(this).attr("your attribute", "your value");
Upvotes: 0