getElementsByClassName 打字稿

Question

我正在使用 VueJS3 - Typescript。

我有 1 个组件“Form”在我的视图“FormPage”中调用了 2 次。我想获取我的 2 个组件的信息。我尝试使用 document.getElementsByClassName(“key”) 方法获取信息，但控制台只显示一个 HTMLCollection []（长度：0）。而不是 2 个元素的数组。

如何获取 document.getElementsByClassName(“key”) 元素的值？

我的组件：

<form id="form">
  <h2>{{ plateform }}</h2>
  <p>
    <label for="key">Key:</label>
    <input type="text" name="key" v-model="key">
  </p>
  <p>
    <label for="secret">Secret Key:</label>
    <input type="text" name="secret" v-model="secret">
  </p>
  <p v-if="plateform === 'Coinbase Pro'">
    <label for="passphrase">Passphrase:</label>
    <input type="text" name="passphrase" v-model="passphrase">
  </p>
</form>

import { Options, Vue } from 'vue-class-component'
@Options({
  props: {
    plateform: String
  }
})

export default class Form extends Vue {
  plateform!: string
  data() {
    return {
      key : 'key',
      secret : 'secret',
      passphrase : 'passphrase'
    }
  }
}

我的看法：

   <div class="form">
    <Form plateform="Coinbase" />
    <Form plateform="Coinbase Pro"/>
    <button @click="send_request()">Send</button>
   </div>

 @Options({
   components: {
     Form
   }
 })
 export default class FormPage extends Vue {
    send_request() {
        console.log('clicked');
        var list = document.getElementsByClassName("key")
        console.log(list);
        //var list: any = document.getElementsByClassName("key");
        //console.log(list);
        //for (let item of Array.from(list)) {
        //    console.log('item');
        //}
    }
 }

Answer 1

这是 name 而不是 class:

<input type="text" name="key" v-model="key">

向其添加 class 或按名称 select 元素：

<input type="text" name="key" class="key" v-model="key">

document.querySelectorAll('[name="key"]')

getElementsByClassName 打字稿

getElementsByClassName typescript

getelementsbyclassname

typescript

vuejs3