VUEjs,如何根据它的id获取文本框的值

VUEjs, how to get value of text box based on it's id

我有 two text boxes,两个文本框都有值。

但我想得到 value of one text box based on id number 我会输入。

如果我输入1 it should show value of text box 1.

这是我尝试过的方法,现在显示的是来自两个文本框的数据。

模板:

<input  v-model="textdata1" id="1" type="text" placeholder="i am id1, show my value">

<input v-model="textdata2" id="2" type="text" placeholder="i am id2, show my value">

<input v-model="searchid"  type="text" placeholder="which ids data you want, 1 or 2 ">

<button  @click="getvalue">RECEIVE</button>

<div>show value of id 1or2 here: {{id1data}}</div>

VUEJS:

<script>
import { defineComponent,ref } from 'vue'

export default defineComponent({
  setup() {
      const id1data =ref("");
      const id2data =ref("");

function getvalue(){
    
    this.id1data=this.textdata1;
    this.id2data=this.textdata2;
    
    }

return{
   id1data,
    id2data,
    getvalue,
}
}
})
</script>

这是一种方法。 您可以为每个输入创建一对数据值。

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const textdata1 = ref("");
    const id1data = ref("");

    const textdata2 = ref("");
    const id2data = ref("");

    const searchid = ref("");
    const searchidinput = ref("");

    function getvalue() {
      this.searchid = this.searchidinput;
      switch (this.searchid) {
        case "1":
          this.id1data = this.textdata1;
          break;
        case "2":
          this.id2data = this.textdata2;
          break;
      }
    }

    return {
      textdata1,
      id1data,
      textdata2,
      id2data,
      searchid,
      searchidinput,
      getvalue,
    };
  },
});
</script>

<template>
  <input v-model="textdata1" id="1" type="text" placeholder="i am id1, show my value" />

  <input v-model="textdata2" id="2" type="text" placeholder="i am id2, show my value" />

  <input v-model="searchidinput" type="text" placeholder="which ids data you want, 1 or 2 " />

  <button @click="getvalue">RECEIVE</button>

  <div>show value of id {{ searchid ? searchid : "<none>" }} here: 
{{ searchid === "1" ? id1data : searchid === "2" ? id2data : "none selected"}}
    
  </div>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>

出于简洁和组织的目的,您也可以改用 reactive()

如果您坚持改用 ID,可以使用以下方法:

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const value = ref("");

    const searchid = ref("");
    const searchidinput = ref("");

    function getvalue() {
      this.searchid = this.searchidinput
      const el = document.getElementById(this.searchid);
      if (el) {
        this.value = el.value
      }
    }

    return {
      value,
      searchid,
      searchidinput,
      getvalue,
    };
  },
});
</script>

<template>
  <input id="1" type="text" placeholder="i am id1, show my value" />

  <input id="2" type="text" placeholder="i am id2, show my value" />

  <input v-model="searchidinput" type="text" placeholder="which ids data you want, 1 or 2 " />

  <button @click="getvalue">RECEIVE</button>

  <div>show value of id {{ searchid ? searchid : "<none>" }} here: 
{{ value ? value : "none selected"}}
    
  </div>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>