Question

我正在为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>

//函数

AddPerson: function () {
    var nperson = document.getElementById("name").valueOf().value.name;
    console.log(nperson);
}

我需要将用户输入的文本输出到页面上的名称行中，并将其发布到console.log（）。

///已添加

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

Answer 1

由于使用name将输入值绑定到v-model属性，因此可以直接在方法内部使用该属性，如下所示：

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

和name属性应该在数据对象内部定义，例如：

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

并尝试使用text代替name作为输入类型：

<input type="text" ...

完整示例

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      result: '',
      name: '',
      seats: '',
      reservation: ''
    }
  },
  methods: {
    FetchData() {
      var nperson = this.name
      console.log(nperson);
    
  },
  AddPerson: function() {
    var nperson = this.name
    console.log(nperson);
  }

}
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app" class="container">
  <form class="pt-3">
    <div class="form-group">
      <label for="name">Person ID</label>
      <input type="name" id="name" class="form-control is" @input="AddPerson" v-model="name" placeholder="123456" value="">
      <div class="invalid-feedback">ID must be at least 5 characters</div>
      <button class="btn btn-secondary btn-lg btn-block" @click.prevent="FetchData">Найти</button>
    </div>
  </form>
</div>

Answer 2

这应该可以很好地工作，Vue的重点是，因此您不必直接使用DOM。只需通过您的vue实例（在这种情况下为name）或通过vm使用this变量。请记住，箭头函数捕获了当前范围，因此您不能在其中正确使用this，请确保为方法使用function() ...定义。

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

let vm = new Vue({
  el : "#root",
  data : {
    name : "hi"
  },
  methods : {
    FetchData : function(e) {
      console.log(this.name);
      e.preventDefault();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="root" class="pt-3">
  <div class="form-group">
    <label for ="name">Person ID</label>
    <input
      id="name"
      v-model="name"
      placeholder="123456"
    >
    <div class="invalid-feedback" v-if="!name.minLength">ID должн быть минимум 5 символов</div>
    <button class="btn btn-secondary btn-lg btn-block" @click="FetchData">Найти</button>
  </div>

Answer 3

有很多方法可以给猫皮剥皮-标准的vuejs可以通过v-model来完成，另一种可以使用$refs来完成，而且-别忘了-香草JS也可以为您提供服务document.getElementById('id-name').value。在此示例中，我将演示所有三种方式：

Codepen Example

模板：

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

JS：

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

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

3 个答案: