Skip to content
Advertisement

Changing placeholder depending on which selectbox option is selected

I have a select box which is getting a value I want my input to get the select box value if that option in selectbox is selected. I mean dynamically changing the input placeholder by which option is selected.

sandbox link to my code

Advertisement

Answer

Try like following snippet (you can create method and find selected option):

new Vue({
  el: "#demo",
  data() {
    return {
      text: "",
      selected: null,
      options: [
        { value: null, text: "Please select an option" },
        { value: "a", text: "This is First option" },
        { value: "b", text: "Selected Option" },
        { value: { C: "3PO" }, text: "This is an option with object value" },
        { value: "d", text: "This one is disabled", disabled: true },
      ],
    };
  },
  methods: {
    place() {
      if (this.selected) return this.options.find(o => o.value === this.selected).text
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo" class="container">
    <b-form-select
      v-model="selected"
      :options="options"
      size="sm"
      class="mt-3"
    ></b-form-select>
    <div class="mt-3">
      Selected: <strong>{{ selected }}</strong>
    </div>
    <b-form-input v-model="text" :placeholder="place()"></b-form-input>
    <div class="mt-2">Value: {{ text }}</div>
  </div>
Advertisement