vue.js helloworld not working within existing bootstrap site

Question

I want to replace my project's first piece of vanilla JS with vue.

I try to get the hello world example working.

It works as stated, but when I nest the element in another element (these may be the wrong terms) it does not work.

My source code:

<!-- this works -->
<div id="app">
  <p>${ message }</p>
</div>

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

Full code example.

The class="container" is needed for bootstrap.

EDIT: I took the generated html and edited it down to just the bare minimum to show it not working. See the result.

Remove the first one. You can't have duplicate ids on elements. — Bill Criswell
– Bill Criswell, Commented Mar 3, 2018 at 23:01

Eudoxus · Accepted Answer · 2018-03-03 23:01:33Z

1

Wrap the container with

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

It should work that way

answered Mar 3, 2018 at 23:01

Eudoxus

115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DobleL · Accepted Answer · 2018-03-03 23:03:14Z

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>

answered Mar 3, 2018 at 23:03

DobleL

3,9401 gold badge16 silver badges20 bronze badges

2 Comments

senorsmile Over a year ago

ah you are right... I was doing that as an example, but removing the first bit makes it work within the nested div. this isn't the problem in my production code though. Let me attempt to get a larger example to narrow down what's going on.

senorsmile Over a year ago

I edited the original question with a second jsfiddle link that shows the non working code in context.

General Grievance · Accepted Answer · 2023-05-24 17:19:52Z

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>

Collectives™ on Stack Overflow

vue.js helloworld not working within existing bootstrap site

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related