Vue V-If с данными бэкэнда Laravel

Question

У меня есть приложение, которое использует laravel для компонентов backend / api и vue в представлениях для внешнего интерфейса, это хороший комбо-пример.

Вот что я делаю сейчас:

@if(count($latestPosts) > 0)
    <div class="LAYOUTwrapper_section">
        <layout-title-2 :title="'Últimas publicaciones'"></layout-title-2>
        <post-list-1 :posts="{{ json_encode( $latestPosts ) }}" :title="'Últimas publicaciones'"></post-list-1>
    </div>
@endif

Теперь, когда я хочу проверить, должен ли я рендерить компонент (postsarray может быть пустым, а не рендеринг post-компонента), я использую условный синтаксис blade-сервера, теперь это работает, но я думаю о перемещении этой логики в компоненты vue, оставьте BladeСинтаксис к минимуму и обрабатывать это во внешнем интерфейсе с помощью vue полностью.

Теперь мой вопрос: как я могу проверить, является ли массив laravel пустым в компоненте vue, размещенном в файле блэйда, а не внутри компонента, в основном я хочуиспользовать v-if для проверки, если длина $ posts больше нуля внутри v-if

Сильфонный код не работает, но я бы хотел что-то подобное.

<div class="LAYOUTwrapper_section" v-if="{{ json_encode($latestPosts).length > 0 }}>
    <layout-title-2 :title="'Últimas publicaciones'"></layout-title-2>
    <post-list-1 :posts="{{ json_encode( $latestPosts ) }}" :title="'Últimas publicaciones'"></post-list-1>
</div>

Answer 1

У вас есть несколько вариантов.

Лучшее решение

Действительно отделите ваш компонент , переместив данные за API и попросив ваш компонент запрашивать необходимую информацию уконечная точка.Ваше приложение / оболочка / компонент должно отвечать за получение необходимых данных.

Не очень хорошее решение

v-if ожидает условного Javascript, так что вы можете просто получить свой блейд дляпредставьте шаблон HTML как v-if="true" или v-if="false". Обратите внимание, что если вы по ошибке передадите "false" вместо false, Javascript будет интерпретировать это как значение truthy, и логика будет нарушена.

Когда vue захватывает и рендерит компонент, boolean должен включиться на смонтированном.

Вы также можете передать значение в качестве опоры вашему компоненту.<layout-wrapper :shouldDisplay="{{..}}" /> и используйте это на v-if.

{
    template: `
    <section/>
        <div class="LAYOUTwrapper_section" v-if="shouldDisplay"></div>
    </section>
    `,
    props: {
        shouldDisplay: Boolean
    }
}