激活控制器呈现的模板中的 Vue

Question

我陷入了(Laravel(控制器提供使用Ajax插入前端的视图的情况，如下所示：

我的控制器.php

return Response::json(['html' => View::make('my_blade_view', [
'items' => $items
])->render()]);

在 my_blade_view.blade.php 中，我需要添加一些 Vue.js 功能，如下所示：

my_blade_view.刀片.php

<div v-on:click="myVueMethod"></div>

问题是，当 Ajax 调用完成时，尽管来自 my_blade_view.blade.php 的 HTML 已成功插入到页面(这是另一个 Blade 视图(中，但 v-on：click 功能不会运行。 我想知道是否有办法告诉 Vue 实例在 Ajax 调用完成时重新处理页面，以便它选取我在控制器渲染的模板中添加的新 Vue 代码？

谢谢。

Answer 1

我相信你可以使用$mount来处理这个问题。

您需要做的是在MyController.php中声明组件，但不要将其挂载到任何 html 元素。 然后，一旦您的ajax呼叫完成并且my_blade_view.blade.php中的html被添加到dom然后呼叫$mount(elementSelector)。

下面是一个简单的示例，演示如何在创建实例后挂载到元素。

var vm = new Vue({
data: {
message: 'Hello'
}
})
setTimeout(function(){
vm.$mount("#app");
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<span>{{message}}</span>
</div>

或者，在不知道情况的情况下，您是否可以将my_blade_view.blade.php推入MyController.php并用v-if隐藏它，而不是使用 ajax 加载它？