Vue.js : V-Model not updating on input

Question

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.

you have msg in data, but you donot have message as the data property — Shivam Singh
– Shivam Singh, Commented Mar 18, 2020 at 15:24

tony19 · Accepted Answer · 2022-07-15 21:29:01Z

4

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

edited Jul 15, 2022 at 21:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 18, 2020 at 15:26

Javier Heisecke

1,2521 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js : V-Model not updating on input

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