What is the best way to retrieve the value of a text box in VUEjs using its unique identifier?

Question

What is the best way to retrieve the value of a text box in VUEjs using its unique identifier?

In my form, there are a total of two text boxes with predefined values. However, I am looking for a way to retrieve the value of one specific textbox based on the entered ID number.

For example, if I input "1," I expect to see the value of text box 1 only.

https://i.sstatic.net/3K1xV.jpg

Currently, my implementation fetches data from both text boxes, which is not the desired outcome.

See below for the 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="searchid" type="text" placeholder="Specify the ID (1 or 2) you want to retrieve data for">

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

<div>The value of the specified ID will be shown here: {{id1data}}</div>

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

javascript vue.js vuejs2 vue-component vuejs3

Answer 1

Answer №1

If you are adamant about utilizing IDs, here is a method to achieve that:

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

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

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

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

    return {
      value,
      searchid,
      searchidinput,
      retrieveValue,
    };
  },
});
</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="retrieveValue">GET VALUE</button>

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

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

Answer 2

If you are adamant about utilizing IDs, here is a method to achieve that:

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

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

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

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

    return {
      value,
      searchid,
      searchidinput,
      retrieveValue,
    };
  },
});
</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="retrieveValue">GET VALUE</button>

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

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

Answer 3

Answer №2

If you're looking for a solution, here's an approach that could help. Consider creating a set of data pairs for each input.

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

An alternative option is to utilize reactive() for better conciseness and organization purposes.

Answer 4

If you're looking for a solution, here's an approach that could help. Consider creating a set of data pairs for each input.

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

An alternative option is to utilize reactive() for better conciseness and organization purposes.

What is the best way to retrieve the value of a text box in VUEjs using its unique identifier?

Answer №1

Answer №2

Similar questions

Best practice for structuring an object with multiple lengthy string elements in the GCP Datastore Node Library

The A-frame advances in the direction of the camera's view

Ensure NodeJS/JSDom waits for complete rendering before performing scraping operations

Issue with ReactJS and Material UI: FlexGrow functionality malfunctioning

Steps to assign a value to an input element using the state in a React application

Experiencing a problem with XAMPP? Changes made to the code are not reflected after saving

Tips for effectively passing a $scope object between various controllers

Guide to accessing component methods within slots using the Vue 3 Composition API

Implementing a language switch feature with Vue, Vuex, and Vue-i18n

Creating a production-ready installation of Tailwind CSS with Vue 3

What are the best practices for managing POST data in Express.js?

Toggle visibility of various items in a to-do list, displaying only one item at a time with the use of JavaScript

React Table Pagination Bug with Material UI Library

Is it possible to use nodemailer locally with NodeJS? The issue is that the greeting emails are not being received

show information from json onto an html page with the help of jquery

Passing all selected items from a list to the controller

Creating a custom ID for a Firebase POST request

Setting default date and time for Bootstrap datetimepicker only in the expanded calendar view

IE8 encountering issues with Jquery ajax() request

Asynchronous callback in mongoose with an undefined value