Vue. js: V-модель не обновляется при вводе

Question

Я запустил свой шаблон VueJS, используя 'vue init webpack learning', это самая базовая c установка, поскольку я не использую никаких инструментов из пакета, просто нет для всех инструментов.

Завершена загрузка шаблона, я просто удаляю все ненужные элементы и начинаю размещать так:

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
 }
</script>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <!-- vmodel input -->
    <input v-model="message" type="text" placeholder="Enter a Message" />
    <p>Message is: {{ message }}</p>
    <!-- ^ the {{ message }} above is not updating in the browser as it is running in 'npm run dev' -->
  </div>
</template>

, как я прокомментировал выше, {{message}} не обновляется, поскольку я печатаю в своей среде npm run dev, даже в другой режим работы.

Как я могу это исправить? Я деинсталлировал и устанавливал NPM снова и снова, не говоря уже об удалении 'home brew' и устанавливал NodeJS снова и снова, он не работает.

Некоторые помогают мне с этим, это расстраивает начинающие, как я.

Answer 1

Вы пытались определить сообщение в части данных вашего скрипта?

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <!-- vmodel input -->
    <input v-model="message" type="text" placeholder="Enter a Message" />
    <p>Message is: {{ message }}</p>
    <!-- ^ the {{ message }} above is not updating in the browser as it is running in 'npm run dev' -->
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      message : ""
    }
  },
 }
</script>

Я бы порекомендовал прочитать руководство vuejs, вы можете найти его здесь Если вы хотите напрямую о том, как работают компоненты, здесь