CODEWITHSUNDEEP
htmlvue.jsvuejs2bootstrap-vue
BeaST 30
BeaST 30

Reputation: 744

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

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.

Upvotes: 1

Views: 359

Answers (2)

Hiws
Hiws

Reputation: 10404

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>

Upvotes: 1

nick
nick

Reputation: 126

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

Upvotes: 1

Related Questions