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

CodePudding user response：

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,IntersectionObserver" 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" >
    <b-form-select
      v-model="selected"
      :options="options"
      size="sm"
      
    ></b-form-select>
    <div >
      Selected: <strong>{{ selected }}</strong>
    </div>
    <b-form-input v-model="text" :placeholder="place()"></b-form-input>
    <div >Value: {{ text }}</div>
  </div>