Реактивность VueJS не работает внутри лопатки - PullRequest
Новая
       11

Реактивность VueJS не работает внутри лопатки

0 голосов
/ 08 сентября 2018

Я только что экспериментировал с vuejs, пытаясь заставить его работать над моим проектом laravel.

Проблема в том, что реактивность работает нормально, если мой элемент находится в шаблоне макета, но не в разделе. Я пытаюсь изменить свойства из консоли, чтобы увидеть их изменение в DOM.

У меня есть представление под названием blog.blade.php, которое расширяет макет app.blade.php

Код в 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>

Вот код в моем представлении blog.blade.php 

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

В корне элемента отображается значение свойства tester, но его нельзя изменить, но это работает в тестовом элементе, который находится в конце файла макета app.blade.php.

Я действительно потерян и не знаю, что здесь происходит. Если бы кто-нибудь мог пролить свет на это, это было бы здорово.

https://pastebin.com/GkNqFUzy

1 Ответ

0 голосов
/ 11 сентября 2018

Для изменения значения vuejs предоставляет атрибут v-модели

Прочитайте это Официальный Документ для получения дополнительной информации 

<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>

Если вы измените значение тестера в консоли vue dev или консоли браузера, вы сможете легко его изменить

Я также предлагаю вам использовать Vue Dev Console для отладки vue приложения.

...