[Vuejs]-Vue.js Documentation Example Not working in Codepen?

by

0👍

It’s working in vue beacause the internally have vue-setup on their website and to use it in codepen you have to import vue cdn and then you need to create a vue instance and append in a root DOM. You can refer below code snippet.

The below code is of vue 2.0 and vue now has latest version vue 3.0 you can check that out as well Vue 3

const app = new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<body>
  <div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
  </div>
</body>

</html>

Leave a comment