從 Vue.js 中的文檔元素獲取值

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

由於您使用v-model將輸入值綁定到name屬性，因此您可以直接在方法中使用該屬性，如下所示：

 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 實例（在本例中為vm ）或通過this使用name變量。 請記住，箭頭函數捕獲當前范圍，因此您無法在其中正確使用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並且 - 不要忘記 - vanilla JS 始終為您提供document.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>

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>