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

我有下一个组件，它在模态标记中。单击时，模式打开，其中包含从所述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;
      });
    }
  }
});

Vue.component（'laravel-view'{
模板：“#laravel视图.vue模板”，
数据（）{
返回{
viewHtml:null
}
},
道具：[
“url”
],
安装的（）{
this.loadPost（this.url）
},
方法：{
loadPost（查看URL）{
var self=这个；
$.get（viewUrl，函数（htmlString）{
var compiled=Vue.compile（“”+htmlString+“”）；
self.viewHtml=htmlString；
});
}
}
});

以及来自刀片文件的模板：

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

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

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

image}“style=”margin:auto；" />

{{$post->title}
{{$post->caption}

@foreach（$post->comments as$comment）
{{'@.$comment->username}
{{$comment->comment}
{{\Carbon\Carbon:：parse（$comment->created_at）->toDateTimeString（）}
@endforeach
邮寄

---

我在这两个.js文件上都定义了这个方法（并不是说我在这两个文件上都需要它；只是为了知道它在世界上的什么地方被触发，假设它被触发了），并且事件从未触发。我通过将按钮的类型更改为“提交”并单击它来确保按钮工作（这会重新加载页面）。但是，问题仍然存在。我如何才能使此工作正常进行？

对于任何感兴趣的人，希望这对遇到相同问题的人有用，发生的情况是：

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

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

邮寄