[Vuejs]-Vue.js : V-Model not updating on input

by

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

👤Javier Heisecke

Leave a comment