How can I call javascript from template vue.js 2?

Question

My view is like this :

...
 <td  @click="modalShow('modal-option', '{{ $i }}')">
    ...
</td>
...

@section('modal')
    <option-modal id="modal-option" :id="idModal"></option-modal>
@endsection

When the view clicked, it will display modal like this :

<template>
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                ...
                <div class="modal-body">
                    <a href="javascript:" class="text-danger" :id="'image-delete-' + id">
                        <span class="fa fa-trash"></span>
                    </a>
                </div>
                ...
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name: 'OptionModal',
        props:['id'],
    }
</script>

I display modal with vue.js 2

When I click icon trash, I want to call javascript

I have global javascript. The name is main.js

The main.js is like this :

for(let i = 0; i < 5; i++) {   
    $('#image-delete-'+i).click(function(){
        $('input[name="image-'+i+'"]').val('');
        document.getElementById("image-view-"+i).style.display = "none";
        document.getElementById("image-upload-"+i).style.display = "";
        $('.modal').modal('hide');
    });
}

When I clicked the trash icon in modal, javascript was unsuccessful called

How can I solve this problem?

why do u use interpolation inside the @click ? you get there full access to your methods and data. — LiranC
– LiranC, Commented May 30, 2017 at 7:37
You must $emit (raise) an event from option-modal and grab it on your view — Max
– Max, Commented May 30, 2017 at 7:38

Bert · Accepted Answer · 2017-05-30 16:44:11Z

1

Whether the click handlers you are adding via jQuery will work depends entirely on when you add the click handlers. If you are adding the click handlers before the Vue is mounted, then your clicks will never fire.

This won't work

for(let i = 0; i < 5; i++) {   
  $('#image-delete-'+i).click(function(){
    ...
  });
}

new Vue(...)

Here is an example.

If you add your handlers in mounted, then you can get it to work.

This should work

new Vue({
  el:"#app",
  data:{
  },
  mounted(){
    for(let i = 0; i < 5; i++) {   
      $('#image-delete-'+i).click(function(){
        ...
      });
    }
  }
})

Example.

Finally, you could add your handlers in this fashion and it wouldn't matter when you added them.

for(let i = 0; i < 5; i++) {   
  $(document).on("click", `#image-delete-${i}`, function(){
    ...
  });
}

But, I'm not sure this is what is happening because you give so little code. Of course the ideal case would be to let Vue define the handlers.

edited May 30, 2017 at 16:44

answered May 30, 2017 at 16:36

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

moses toh Over a year ago

Okay, Thanks. I will try it first

moses toh Over a year ago

Yes. Thanks for your help

Collectives™ on Stack Overflow

How can I call javascript from template vue.js 2?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related