Vuejs - 单击组件​​中的按钮时未触发事件

Posted 2023-02-23

【中文标题】Vuejs - 单击组件​​中的按钮时未触发事件

【英文标题】：Vuejs - Event not triggering when clicking button in component

【发布时间】：2018-12-04 13:03:07

【问题描述】：

我有下一个组件，它位于模态标签内。单击时，模式会打开，其中包含从所述 url 获取的内容。

<modal>
<laravel-view :url="' '/post/view/' . $comment->source_id '"></laravel-view>
</modal>

这里定义：

Vue.component('laravel-view',
  template: '#laravel-view.vue-template',
  data()
    return 
      viewhtml: null
    
  ,
  props: [
    'url'
  ],
  mounted() 
    this.loadPost(this.url)
  ,
  methods: 
    loadPost(viewUrl)
      var self = this;
      $.get( viewUrl, function( htmlString ) 
        var compiled = Vue.compile('<div>' + htmlString + '</div>');
        self.viewHtml = htmlString;
      );
    
  
);

还有来自刀片文件的模板：

<script type="text/x-template" id="laravel-view" class="vue-template">
    <div class="view-wrapper" v-html=viewHtml>
    </div>
</script>

当您单击 laravel-view 组件时，模式会打开（这是另一个组件），显示的内容将是它从链接中获取的内容。这是从控制器返回的视图，其中包含从上面获取的信息：

<div>
    <div class="post" style="text-align: center;">
        <img src=" $post->image " style="margin: auto;" />
        <p>
            <h1 > $post->title </h1>
             $post->caption 
        </p>
    </div>
    <div class="post-comments">
        <div class="post-content">
        @foreach( $post->comments as $comment )
            <div class="comment activity-box-w" id="$comment->post_id">
                <div class="activity-box" style="align-items: normal">
                    <div style="margin-top: 5px">
                         <div class="activity-avatar" style="background-image: url( asset($comment->image) ); float: left;">
                        </div>      
                    </div>

                  <div class="activity-info">
                    <div class="activity-role">
                       '@' . $comment->username 
                    </div>
                    <div class="ellipsis">
                        <div>
                            <p class="activity-title"> $comment->comment </p>
                        </div>
                    </div>
                  </div>
                  <div class="time">
                     \Carbon\Carbon::parse($comment->created_at)->toDateTimeString() 
                  </div>
                </div>
            </div>
        @endforeach
        </div>
        <div class="post-pub" style="width: 100%;padding-top: 10px; margin-left: 25%;">
            <form style="width: 100%:">
                <textarea rows="1"></textarea>
                <button type="button" class="btn-primary btn-s" v-on:click="commentPost">Send</button>
            </form>
        </div>
    </div>
</div>

我已经在两个.js 文件上定义了该方法（不是我在两个文件上都需要它；只是知道它在世界上的哪个位置被触发，假设它确实触发了）并且事件永远不会触发。我通过将其类型更改为“提交”并单击它（重新加载页面）来确保该按钮有效。尽管如此，问题仍然存在。我怎样才能做到这一点？

【参考方案1】：

对于任何有兴趣的人，希望这对遇到同样问题的人有用，会发生什么：

据我所知，组件在从源获取数据时正在重新渲染；然而，它没有再次包含脚本！，这就是按钮根本没有响应的原因。来解决这个问题。我必须将它包含在第一个刀片文件中，如下所示：

<laravel-view :url="' '/post/view/' . $comment->source_id '"></laravel-view>
    <div class="post-pub" style="width: 100%;padding-top: 10px;">
        <form style="width: 100%:">
            <textarea rows="1" v-model="postComment" id="postCommentTextArea"></textarea>
            <button type="button" class="btn-primary btn-s" @click="comment( $comment->id )">Send</button>
        </form>
    </div>