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

Posted 2023-02-23

【中文标题】如何从模板 vue.js 2 调用 javascript？

【英文标题】：How can I call javascript from template vue.js 2?

【发布时间】：2017-10-30 12:38:36

【问题描述】：

我的看法是这样的：

...
 <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调用失败

我该如何解决这个问题？

【问题讨论】：

为什么要在@click 中使用插值？您可以完全访问您的方法和数据。

你必须从 option-modal 中 $emit (raise) 一个事件并在你的视图中抓取它

@Max，我很困惑。你应该用代码回答

@LiranC，没关系

Vue2 Events

【参考方案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 定义处理程序。

【讨论】：

好的，谢谢。我先试试

是的。感谢您的帮助