Laravel：如何在Vue.js加载之前隐藏插值代码？

Question

我有一个Laravel网站，当我使用Laravel从数据库加载数据时，然后通过以下方式将结果传递给JavaScript：

<script>
window.forfaits = <?php echo json_encode($results); ?>;
</script>

然后我使用 Vue js v-for 显示我的数据。问题是在 Vue Js 加载之前，我在首页上看到了插值符号，而 v-cloak 无法工作，因为我是使用 php 获取数据然后传递给 js。

如何使插值不显示在页面上？

更新

我所说的插值是指这个：

这是我的 main.blade.php 文件，它被加载为首页：

<script>
window.forfaits = <?php echo json_encode($forfaits); ?>;
</script>
@extends('layouts.app')

<div>
@section('main-content')
<div class="col-sm-8 col-md-9">
    <div id="filter-items">
        <div class="product-item offre" v-for="forfait in filteredForfaits">
            <div class="product-na">
                <h3 class="product-name">@{{forfait.nom_forfait}}</h3>
                <div class="product-actions">
                 ............................

- Nacim Idjakirene

---

“插值”是什么意思？ - Jeffrey

另外，请贴出你的Vue模板。 - Jeffrey

为什么不添加一个隐藏所有元素的body类，然后使用JavaScript在加载时删除该body类？你甚至可以添加一个过渡效果，使其看起来像页面淡入。 - Josh Griggs

Answer 1

如果您想使用v-cloak来隐藏未编译的模板，您需要按照此处所述创建CSS规则：https://v2.vuejs.org/v2/api/#v-cloak 它的工作原理非常简单。通过v-cloak css规则隐藏未编译的模板。如果Vue编译器在已编译的模板上看到v-cloak属性，它将简单地删除该属性，然后您的组件就会出现在页面上。

[v-cloak] {
  display: none;
}

你是否已经包含它？

此外，你必须确保包含 [v-cloak] 规则的 css 文件在未编译的 Vue 模板出现时加载。你可以决定关键的 css 或使用 rel="preload"（现代浏览器已经支持）来加载那部分 css。

- pinguinjkeke

---

@NacimIdjakirene，您不需要先加载Vue就可以使用v-cloak属性。首先，模板由Vue编译，然后如果存在v-cloak属性，Vue会将其删除。试试这个：<h3 class="product-name" v-cloak>@{{forfait.nom_forfait}}</h3> - pinguinjkeke

刚试了一下，不起作用。在Vue js编译模板之前，它必须先加载，在此之前，Blade正在渲染模板并忽略@{{CODE}}，因此在浏览器上显示。 - Nacim Idjakirene

@NacimIdjakirene，此时是否加载了带有[v-cloak]规则的CSS？ - pinguinjkeke

哦，我的天！我觉得它正在工作！让我在生产环境中测试一下。 - Nacim Idjakirene

在Chrome中它运行良好，但在Firefox中CSS加载需要比Chrome更长的时间，因此我在CSS加载之前看到了HTML。有什么解决方法吗？ - Nacim Idjakirene

Answer 2

首先，你是否将Vue加载到HTML代码的底部？ 如果是，可能应该将其放在头标签中，以便更早地加载。

但是，我的建议是通过Vue构建整个应用程序，我可以看到你正在构建某种面板？ 也许你应该考虑使用Vue构建一切，并使用Laravel提供的API端点获取数据，这就是我如何构建它的方法。

- adir kandel

---

我认为这正是我要做的事情，但有没有什么方法可以暂时隐藏它不出现在屏幕上？ - Nacim Idjakirene

也许你可以在网站上实现一个加载器，将所有内容隐藏起来。当 Vue.js 文件加载完成后，你可以隐藏加载器，然后就能看到预期的所有内容了。 - adir kandel