CODEWITHSUNDEEP
javascriptjqueryvue.jsvuejs2vue-component
moses toh
moses toh

Reputation: 13202

How can I add condition in button tag ? (vue.js 2)

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

Answers (2)

Yami Odymel
Yami Odymel

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

Jacobjanak
Jacobjanak

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

Related Questions