Vue component not displaying data in HTML page

Question

index.html:

<body>
    <div id="app">
        {{ message }}
    </div>

    <div id="counter">
        {{ counter }}
    </div>
      
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>

index.js:

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

const Counter = {
    data() {
        return {
            counter: 0
        }
    }
}
  
Vue.createApp(Counter).mount('#counter')

and the output is:

Hello Vue!
{{ counter }}

Why is my code for counter not working?

Dan Knights · Accepted Answer · 2020-10-31 13:44:00Z

You're using the syntax for two separate versions of Vue.

new Vue is v2, Vue.createApp is v3.

For your code to work with v2:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

const Counter = new Vue({
  el: '#counter',
  data() {
    return {
      counter: 0
    }
  }
})

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  {{ message }}
</div>

<div id="counter">
  {{ counter }}
</div>

For your code to work with v3:

var app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

const Counter = Vue.createApp({
  data() {
    return {
      counter: 0
    }
  }
})

app.mount('#app');
Counter.mount('#counter');

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  {{ message }}
</div>

<div id="counter">
  {{ counter }}
</div>

Collectives™ on Stack Overflow

Vue component not displaying data in HTML page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related