Laravel : Vue js가 로드되기 전에 보간 코드를 숨기려면 어떻게 해야 합니까?

Laravel : Vue js가 로드되기 전에 보간 코드를 숨기려면 어떻게 해야 합니까?

Laravel 웹사이트가 있는데, Laravel을 사용하여 데이터베이스에서 데이터를 로드하면 A가 결과를 JavaScript로 전달합니다.

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

그리고 Vue js를 사용합니다.v-for데이터를 표시합니다.문제는 Vue Js가 로드되기 전에 홈 페이지에 보간이 표시되며 php로 데이터를 가져와 js로 전달하기 때문에 v-cloak이 작업을 수행할 수 없다는 것입니다.

어떻게 하면 페이지에 내삽이 표시되지 않게 할 수 있을까요?

갱신하다

'내삽'이란 이런 거야

그리고 이게 내 메인 블레이드야.홈페이지로 로드되는 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">
                 ............................

를 사용하려는 경우v-cloak컴파일되지 않은 템플릿을 숨기려면 다음 설명에 따라 CSS 규칙을 작성해야 합니다.https://vuejs.org/v2/api/ # v - parament

아주 간단하게 동작합니다.컴파일되지 않은 템플릿은 다음에 의해 숨겨집니다.v-cloakcss 규칙입니다.Vue 컴파일러가 표시되는 경우v-cloak컴파일된 템플릿의 Atribute는 Atribute를 삭제하기만 하면 해당 컴포넌트가 페이지에 나타납니다.

[v-cloak] {
  display: none;
}

포함시켰어요?

또한 컴파일되지 않은 Vue 템플릿이 표시될 때 css 파일 포함 [v-cloak] 규칙이 로드되는지 확인해야 합니다.중요한 css를 결정하거나rel="preload"(모던 브라우저에서는 사용 가능)을 참조해 주세요.

우선 HTML 코드 하단에서 Vue를 로드하는 건가요?헤드태그 안에 넣어두면 더 빨리 넣을 수 있을 거예요.

하지만, 제 조언은 앱 전체를 구축하라는 것입니다. Vue를 통해 뭔가 패널을 구축하고 있다는 것을 알 수 있습니다.Vue를 사용하여 모든 것을 구축하고 Laravel이 제공하는 API 엔드포인트를 사용하여 데이터를 가져오는 것이 좋습니다.이렇게 구축하겠습니다.

언급URL : https://stackoverflow.com/questions/46805745/laravel-how-to-hide-the-interpolation-code-before-vue-js-loads