Javascript 从Vue.js中的文档元素获取值

我正在为我的SpringBoot应用程序创建前端。要发送Get请求，我需要从程序中的输入获取值，但没有成功

在选择了

document.getElementById（“name”）

之后，我尝试使用

.value

、

valueOf（）

、

.toString（）

方法中的任何一种，但它们似乎都不起作用

//元素

<form class="pt-3">
   <div class="form-group">
      <label for ="name">Person ID</label>
      <input
         type="text"
         id="name"
         class="form-control is"
         :class="{'is-invalid': $v.name.$error} "
         @input="$v.name.$touch()"
         v-model="name"
         placeholder="123456"
         value=""
      >
      <div class="invalid-feedback" v-if="!$v.name.minLength">ID must be at least 5 characters</div>
      <button class="btn btn-secondary btn-lg btn-block" @click="FetchData">Найти</button>
   </div>  
</form>

我需要将用户输入的文本输出到页面上的名称行，并将其发布到

console.log（）

///增加

data() {
  return {
    result: '',
    name: '',
    seats: '',
    reservation: ''
  }
}

---

由于要使用

v-model

将输入值绑定到

name

属性，因此可以在方法中直接使用该属性，如下所示：

 AddPerson: function () {
     var nperson = this.name;
   console.log(nperson);
 }

和

name

属性应在数据对象内定义，如：

 data(){
    return{
          name:'',
          ...
        }
     }

并尝试将

文本

作为输入类型，而不是

名称

：

<input type="text" ... 

个人ID
ID必须至少为5个字符
Найти

这应该可以很好地工作，Vue的整个要点是不必直接使用DOM。只需通过vue实例（

vm

在本例中）或通过

this

使用

name

变量即可。请记住，箭头函数捕获当前作用域，因此无法在其中正确使用

this

，请确保使用的是方法的

function（）…

定义

我从示例中删除了很多脂肪，但在最终产品中仍然可以使用。我只是不想为了一个小的演示而复制你的整个项目

let vm=new Vue({
el:“根”，
数据：{
姓名：“你好”
},
方法：{
FetchData:函数（e）{
console.log（this.name）；
e、 预防默认值（）；
}
}
});

个人ID
IDжжжбббббббббб5бб
Найти
给猫剥皮有很多方法-标准的VUEJ一种是通过
v-model
，另一种是使用
$refs
，还有-别忘了-vanilla JS在
文档中也可以使用。getElementById（'id-name'）。value
。我在本例中演示了所有三种方法：


模板：

  <template>
    <div id="app">
      <h5>Tree ways to get your input value</h5>
      <div>
         <div class="form-group">
            <label for="name">Person ID</label>
            <input
               type="text"
               id="myName"
               ref="myInput"
               v-model="name"
               placeholder="123456"
            >
            <div class="spacer">
              <button @click="outputFromModel">v-model</button>
             <button @click="outputFromRef">ref</button>
             <button @click="outputFromId">ID</button>
           </div>
         </div>  
      </div>
    </div>
  </template>


获取输入值的树方法
个人ID
V-模型
裁判
身份证件

JS:


导出默认值{
数据（）{
返回{
名称：“”，
}
},
方法：{
outputFromModel（）{
警报（此.name）
},
outputFromRef（）{
警报（此.$refs.myInput.value）
},
outputFromId（）{
警报（document.getElementById（'myName'）.value）
},
}
};
当我使用this.name时，虽然文本框中有一个输入“123”，但我在输出中什么也得不到这是100%的预期方式。Vue和其他MVC框架的全部要点是，除非框架缺少一个关键功能，否则您不应该直接接触文档。@Paul您能提供您的数据对象吗？@BoussadjraBrahim我已经添加了描述。在我尝试使用您的注释修复该问题后，该问题并没有消失。你还有什么办法解释我为什么会明白吗？
  <template>
    <div id="app">
      <h5>Tree ways to get your input value</h5>
      <div>
         <div class="form-group">
            <label for="name">Person ID</label>
            <input
               type="text"
               id="myName"
               ref="myInput"
               v-model="name"
               placeholder="123456"
            >
            <div class="spacer">
              <button @click="outputFromModel">v-model</button>
             <button @click="outputFromRef">ref</button>
             <button @click="outputFromId">ID</button>
           </div>
         </div>  
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        name: '',
      }
    },
    methods: {
      outputFromModel() {
        alert(this.name)
      },
     outputFromRef() {
        alert(this.$refs.myInput.value)
      },
      outputFromId() {
        alert(document.getElementById('myName').value)
      },
    }
  };
  </script>