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

Posted 2023-03-14

【中文标题】激活控制器渲染的模板中的 Vue

【英文标题】：Activating Vue that is within a template rendered by a Controller

【发布时间】：2018-01-19 10:28:47

【问题描述】：

我陷入了这样一种情况，即（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 代码？

谢谢。

【参考方案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 加载它吗？

【讨论】：

感谢您的回答。我马上去看看

lameleon 不幸的是，我不相信您的任何一个解决方案都对我有用，至少不能按原样工作。对于您的第一个解决方案，我想我需要一些更接近此的方法：jsfiddle.net/gratiafide/g5xx35Lx/3

@user3089840 本质上是一样的。您只有几个语法和逻辑错误。在这里检查this。

我要给你一点，因为你让我更接近，我真的很感谢你的帮助，但问题是 Vue 实例必须已经与el: '#app',在添加新内容之前，必须“重新安装”

@user3089840 dynamic components 是否更适合您的情况？