激活控制器渲染的模板中的 Vue

Question

我陷入了这样一种情况，即（Laravel）控制器提供了一个使用 Ajax 插入前端的视图，如下所示：

MyController.php

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

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

my_blade_view.blade.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 加载它吗？