[Vuejs]-Vue v-if with laravel backend data

by

0👍

You have a few options.

Better Solution

Really decouple your component by moving the data behind an API and have your component request the information it needs from an endpoint. Your App/Wrapper/Component should be responsible of getting the data it needs.

Not so great solution

v-if expects a Javascript conditional, so you could just get your blade to render the HTML template as v-if="true" or v-if="false", Note that if you mistakenly pass "false" instead of false, Javascript will interpret this as a truthy value, and the logic will break.

When vue takes over and renders the component, the boolean should kick in on mounted.

You can also pass the value as a prop to your component.
<layout-wrapper :shouldDisplay="{{..}}" /> and use that on the v-if.

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

Leave a comment