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

Question

I have a Laravel website, when I use Laravel to load my data from the database, then a pass the results to JavaScript this way

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

Then I use Vue js v-for to display my data. The problem is that I see interpolation on the home page before Vue Js loads and v-cloak can't do the work since I'm getting my data with php then pass to js.

How can I do so that interpolation doesn't show on the page?

UPDATE

By interpolation I mean this:

And here is my main.blade.php file which is loaded as the home page:

<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

If you're trying to use v-cloak to hide uncompiled templates you should create CSS rule as described here: https://v2.vuejs.org/v2/api/#v-cloak

It works really simple. Uncompiled templates is hidden by v-cloak css rule. If Vue compiler seeing v-cloak attribute on the compiled template, it simply deletes the attribute and your component appears on the page.

[v-cloak] {
  display: none;
}

Have you include it?

Also, you must be sure that css file, contains [v-cloak] rule will be loaded at a time the uncompiled Vue templates appears. You should decide critical css or use rel="preload" (already available in modern browsers) for that piece of css.

Answer 2

First of all, are you loading Vue from the bottom of your HTML code? if you do maybe you should put it inside your head tag so it could be loaded earlier.

But, my advice for you is to build your whole app thourgh Vue, i can see that you're building a panel of something? Maybe you should consider building everything with Vue and get the data with an API endpoint that Laravel will provide you, that's how I'd build it.