getElementsByClassName typescript

Issue

I’m using VueJS3 - Typescript.

I have 1 component “Form” called 2 times in my view “FormPage”. I want to get the information of my 2 components. I try to get the information with the method document.getElementsByClassName(“key”) but the console show me only a HTMLCollection [] (length: 0). instead of an array of 2 elements.

How can I get the value of the document.getElementsByClassName(“key”) elements ?

My component:

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

My view:

   <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');
        //}
    }
 }

Solution

This is a name not a class:

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

Either add a class to it or select the element by name:

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

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

Answered By - youdateme