Change the value of input tag based on other input without jQuery

Question

I have 2 input tags

Title:
    <b-input
      style="width: 50%"
      v-model="value.title"
      class="input-element"
      placeholder="Title"
      v-on:click="greet"
    />
Id:
    <b-input
      id="id"
      style="width: 50%"
      class="input-element"
      placeholder="Id"
      v-model="value.id"
    />

Whenever I write something in ,I want the value of input to be updated the same as value of title in lowercase.

Can you please elaborate on your question. What is it you want to do? And what have you already tried so far? — Jesper
– Jesper, Commented Dec 18, 2019 at 12:33
I want to change the value of one input box based on other input box's value. I want to use something like document.querySelector("id").innerHTML , but innerHTML isn't working on input. — BeaST 30
– BeaST 30, Commented Dec 18, 2019 at 12:35
So if you put TEST into the title input, it should be reflected in the id input, but shown as test? — Jesper
– Jesper, Commented Dec 18, 2019 at 12:39
What should happen then if the user writes anything into the ID input? — Hiws
– Hiws, Commented Dec 18, 2019 at 12:41

Hiws · Accepted Answer · 2019-12-18 13:00:53Z

You can use a watcher to watch for any changes made to title and set the id to the lowercase value.

This allows the user to still manually update the ID input. While having it overridden whenever the title changes.

new Vue({
  el: '#app',
  data() {
    return {
      value: {
        id: "",
        title: ""
      }
    }
  },
  watch: {
    'value.title'(newVal) {
      this.value.id = newVal.toLowerCase();
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app" class="p-3">
  <b-btn @click="value.title = 'TEST'">Set title to TEST</b-btn><br />
  <label>Title: </label>
  <b-input v-model="value.title"></b-input>
  <label>ID: </label>
  <b-input v-model="value.id"></b-input>

  <div class="mt-2">
  Title: {{ value.title }}<br />
  ID: {{ value.id }}
  </div>
</div>

nick · Accepted Answer · 2019-12-18 12:36:27Z

1

You can use a computed field that changes the title to lowercase and then make the v-model of the id input to use that computed field

answered Dec 18, 2019 at 12:36

nick

1264 bronze badges

Collectives™ on Stack Overflow

Change the value of input tag based on other input without jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related