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？

UPDATE

通过插值我的意思是:

这是我的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: //v2.vuejs.org/v2/api/#v-cloak

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

[v-cloak] {
  display: none;
}

你有包括它吗？

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