Блог

Главная - Вопросы по программированию - Vue.js Пример документации Не работает в Codepen?

Vue.js Пример документации Не работает в Codepen?

#html #vue.js #codepen

#HTML #vue.js #codepen

Вопрос:

Я просто пытаюсь воспроизвести пример для флажков из Vue.js документация, но когда я импортирую Vue в codepen.io а затем вставьте код для нескольких флажков в поле JS, затем HTML в поле HTML, я получаю

 Checked names: {{ checkedNames }}

и когда я нажимаю флажки для определенного имени, например «Jack», это ничего не меняет. Он все еще читается.

 Checked names: {{ checkedNames }}

Что я здесь делаю не так?

Ответ №1:

Он работает в vue, потому что на их веб-сайте есть внутренняя настройка vue, и чтобы использовать ее в codepen, вам нужно импортировать vue cdn, а затем вам нужно создать экземпляр vue и добавить его в корневой DOM. Вы можете обратиться к приведенному ниже фрагменту кода.

Приведенный ниже код относится к vue 2.0, а vue теперь имеет последнюю версию vue 3.0. вы также можете это проверить, 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>

Комментарии:

1. Я попытался скопировать это точно и просто получить пустой результат. Кроме того, я позаботился о том, чтобы сначала импортировать пакет Vue 2.x в поле JS. Редактировать: удаление строки импорта, похоже, исправляет это. Почему это так?

2. Это работает для меня, делюсь ссылкой на codepen, пожалуйста, проверьте codepen.io/mondal10/pen/gOLByVR

3. Я импортировал vue здесь, во фрагменте stackoverflow, чтобы показать демонстрацию в самом stackoverflow, но когда вы копируете вставленный код отсюда в codepen, в который уже был импортирован vue, возможно, возник конфликт.