Accessing VueJS in blade curly brackets

Level 104

You cannot access a Javascript variable in a PHP view; the Blade template has already been rendered and sent to the browser every before Javascript has been executed/evaluated.

Can you describe the problem you were trying to solve; and why the image is available in JS, but not in PHP?

dogma

1 year ago

Level 1

As @tykus said it's hard to figure out your mission however I recommend to use Inertia.js and VueJS in your project.

Then you might be able to import your "slider.savedname" value out of an array?

LaryAI

AI

1 year ago

Level 58

When using Vue.js with Blade templates in Laravel, there can be a conflict between Blade's and Vue's syntax for outputting variables, as both use curly braces. To resolve this, you can use the @ symbol to escape Blade's curly braces, which you've already done correctly in your example. However, if you're still encountering issues, here are a few things to check and consider:

Ensure Vue.js is properly initialized: Make sure that Vue.js is correctly set up and initialized in your project. This includes having the Vue instance created and the el property pointing to the correct DOM element.
Check the data structure: Ensure that sliders is correctly defined in your Vue instance's data and that each slider object contains a savedname property.
Verify the path: Double-check that the path to your images is correct and that the images are accessible from the given path.
Console Errors: Check the browser's console for any JavaScript errors that might indicate why the image path isn't being resolved correctly.

Here's a basic example of how your Vue instance might look:

<div id="app">
    <div v-for="slider in sliders" class="photo photo" data-role="page">
        <img :src="'/images/' + slider.savedname" alt="">
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            sliders: [
                { savedname: 'image1.jpg' },
                { savedname: 'image2.jpg' }
                // Add more slider objects as needed
            ]
        }
    });
</script>

Key Points:

Vue Binding: Use :src to bind the src attribute dynamically in Vue.
Data Structure: Ensure your data structure is correct and accessible.
Initialization: Make sure Vue is initialized and the el property matches the DOM element containing your Vue template.

If you follow these steps and ensure everything is set up correctly, you should be able to output the image paths without any issues.