如何从模板 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 定义处理程序。