Question

我刚开始从提供的文档中学习Vue JS，我正在为项目使用Vue CLI。在使用v-model指令时，我没有得到预期的输出。

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

我输入的名称未在'p'标签中更新。我在这里做错了什么？

Answer 1

您只需从v-model="NameModel"元素中删除label，然后将其添加到input元素。

<label for="Name" id="NameLabel">Name</label>
<input type="text" name="Name" id="NameInput" v-model="NameModel">

Answer 2

Time-Trigger

Vue JS v-model无法正常工作

2 个答案: