CODEWITHSUNDEEP
vue.jsvuejs2v-model
Muhammadim Yusoff Jamaluddin
Muhammadim Yusoff Jamaluddin

Reputation: 55

Vue.js : V-Model not updating on input

I started my VueJS template using 'vue init webpack learning', this is the most basic setup as I am not using any tools from the package, just no to all tools.

Completed the template download, I just remove all unnecessary elements and start placing as follow: 

<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>

as I have commented above, the {{ message }} is not updating as I am typing on my 'npm run dev' environment, even another running mode.

How can I fix that? I uninstalled and installed NPM again and again, not to mention removes 'home brew' and install NodeJS again and again, it is not working.

Some help me with this thing, it is frustrating for beginners like me.

Upvotes: 0

Views: 3005

Answers (1)

Javier Heisecke
Javier Heisecke

Reputation: 1212

Have you tried defining message in the data portion of your 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>

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

I'd recommend reading vuejs guide you can find it here If you want to directly read about how components work, here

Upvotes: 4

Related Questions