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。

我怎样才能在页面上显示插值doest？

更新

通过插值我的意思是：

这是我的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">
                 ............................

Answer 1

如果您尝试使用v-cloak隐藏未编译的模板，则应按照此处所述创建CSS规则：https://vuejs.org/v2/api/#v-cloak

它非常简单。 v-cloak css规则隐藏未编译的模板。如果Vue编译器在编译模板上看到v-cloak属性，它只会删除该属性，并且您的组件将出现在页面上。

[v-cloak] {
  display: none;
}

你有包括它吗？

此外，您必须确保在未编译的Vue模板出现时将加载包含[v-cloak]规则的css文件。你应该决定关键的css，或者使用rel="preload"（在现代浏览器中已有）用于那段css。

Answer 2

首先，您是从HTML代码的底部加载Vue吗？ 如果你这样做，你应该将它放在你的头标签中，以便可以提前加载。

但是，我对你的建议是建立你的整个应用程序thourgh Vue，我可以看到你正在建立一个小组的东西？ 也许您应该考虑使用Vue构建所有内容，并使用Laravel将为您提供的API端点获取数据，这就是我如何构建它。