激活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被成功地插入到页面（这是另一个刀片图）时，V-上：单击功能不运行。我想知道是否有一种方法可以告诉Vue实例在Ajax调用完成时重新处理页面，以便它获取我在Controller呈现的模板中添加的新Vue代码？

谢谢。

Answer 1

我相信你可以用$mount来解决这个问题。

你需要做的是在MyController.php中声明组件，但不要将它挂载到任何html元素。然后，一旦您的ajax呼叫完成，html从my_blade_view.blade.php被添加到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加载它隐藏起来？