vue.js - Vue JS v-model not working

Question

I just starting off learning Vue JS from the documentation provided and I am using Vue CLI for the project. On using the v-model directive I'm not getting the expected output.

<template>
  <div class="AddData">
      <header>
        <h2>Add Data</h2>
      </header>
      <section>
        <form id="form" name="form">
            <label for="Name" id="NameLabel" v-model="NameModel">Name</label>
            <input type="text" name="Name" id="NameInput"><br>
            <label for="Good" id="GoodLabel">Good</label>
            <input type="text" name="Good" id="GoodInput"><br>
            <label for="Bad" id="BadLabel">Bad</label>
            <input type="text" name="Bad" id="BadInput"><br>
            <label for="Picture" id="PictureLabel">Picture Link</label>
            <input type="text" name="Picture" id="PictureInput"><br>
        </form>
      </section>
      <p>Entered Data is {{NameModel}}</p>
  </div>
</template>

<script>
export default {
  name: 'AddData',
  data () {
    return {
      msg: 'This Page is for Adding Data',
      NameModel: ''
    }
  }
}
</script>

The name I'm entering is not getting updated in the 'p' tag. What am I doing wrong here?

标签： vue.js

Answer 1

data : function() {
    return {
      msg: 'This Page is for Adding Data',
      NameModel: ''
    }
}

And v-model must be in <input>