CODEWITHSUNDEEP
javascriptphplaravelvue.jsvue-reactivity
Haider Ali
Haider Ali

Reputation: 964

VueJS reactivity does not work inside blade section

I've just been experimenting with vuejs, trying to get it to work on a laravel project on mine.

The problem is that the reactivity works fine if my element is in the layout blade template, but not in the section. Im trying to modify the properties from the console to see them change in the DOM.

I have a view called blog.blade.php, which extends the layout app.blade.php

The code in app.blade.php

    <div id='test'>
        @{{ test }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var app2 = new Vue({
        el : "#test",
        data : {
            test : "Hello World"
        }
    });

    var app3 = new Vue({
        el : "#root",
        data : {
            tester : "Hello Vue!"
        }
    });

    </script>
</body>
</html>

Here's the code in my blog.blade.php view

   <div class='card'>
        <div class='card-header'>Post a comment</div>
        <div class='card-body'>
           <div id='root'> @{{ tester }} </div>
        </div>
    </div>

In the element root, the value of tester property shows up, but it cannot be modified, but this works in the test element thats at the end of app.blade.php layout file.

Im really lost and have no idea whats going on here. If anyone can shed some light on this, that'd be great.

https://pastebin.com/GkNqFUzy

Upvotes: 2

Views: 726

Answers (1)

Afraz Ahmad
Afraz Ahmad

Reputation: 5386

To change value vuejs provides v-model attribute

Read this official doc for more info

<div class='card'>
    <div class='card-header'>Post a comment</div>
    <div class='card-body'>
       <div id='root' v-model='tester'> @{{ tester }} </div>
    </div>
</div>

If you change tester value in vue dev console or browser console then you can see it being changed easily

I also suggest you to use Vue Dev Console to debug vue app.

Upvotes: 1

Related Questions