如何从模板 vue.js 2 调用 javascript？

Question

我的看法是这样的：

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

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

当点击视图时，它会显示模态如下：

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

我用 vue.js 2

显示模态

当我点击垃圾桶图标时，我想调用javascript

我有全局 javascript。名字是main.js

main.js是这样的:

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');
    });
}

当我点击模态中的垃圾桶图标时，javascript调用不成功

我该如何解决这个问题？

Answer 1

您通过 jQuery 添加的点击处理程序是否有效 完全 取决于您添加点击处理程序的 时间 。如果您在安装 Vue 之前添加点击处理程序，那么您的点击将永远不会触发。

这不行

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

new Vue(...)

这是一个example.

如果您在 mounted 中添加您的处理程序，那么您可以让它工作。

这应该有效

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

Example.

最后，您可以以这种方式添加您的处理程序，何时添加它们并不重要。

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

但是，我不确定这是怎么回事，因为您提供的代码太少了。当然 理想 情况是让 Vue 定义处理程序。