激活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加載它隱藏起來？