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