[Vuejs]-Vue.js helloworld not working within existing bootstrap site

by

1đź‘Ť

Wrap the container with 

 <div id="app"></div>

It should work that way

👤Eudoxus

1đź‘Ť

this works fine, the problem in your template is that you have two elements with id=”app” so vue instance is initialized with the first element with id=”app”, then the second (the nested one) is never initialized

<html>
  <head>
    <script src="https://unpkg.com/vue"></script>
  </head>

  <body>
    <!-- but this doesn't for some reason -->
    <div class="container">
        <div id="app">
        Nested ${ message }
        </div>
    </div>

    <script>
      new Vue({
        delimiters:['${', '}'],
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        }
      })
    </script>


  </body>

</html>
👤DobleL

0đź‘Ť

You have 2 #app id but one vue instance. If you need two #app you should make two Vue instance. Instance 1 for #app1 and instance 2 for #app2. You can save theme in variables if you need to interact within theme:

        <div id="app1">
          <p>${ message }</p>
        </div>
    
        <div class="container">
            <div id="app2">
                Nested ${ message }
            </div>
        </div>
    
        <script>
          var app1 = new Vue({
            delimiters:['${', '}'],
            el: '#app1',
            data: {
              message: 'Hello Vue.js!'
            }
          });

        var app2 = new Vue({
            delimiters:['${', '}'],
            el: '#app2',
            data: {
              message: 'Hello Vue.js!'
            }
          })
        </script>
👤Taqi Vaheed

Leave a comment