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.
Advertisement
Answer
Try like following snippet (you can create method and find selected option):
JavaScript
x
21
21
1
new Vue({
2
el: "#demo",
3
data() {
4
return {
5
text: "",
6
selected: null,
7
options: [
8
{ value: null, text: "Please select an option" },
9
{ value: "a", text: "This is First option" },
10
{ value: "b", text: "Selected Option" },
11
{ value: { C: "3PO" }, text: "This is an option with object value" },
12
{ value: "d", text: "This one is disabled", disabled: true },
13
],
14
};
15
},
16
methods: {
17
place() {
18
if (this.selected) return this.options.find(o => o.value === this.selected).text
19
}
20
}
21
})
JavaScript
1
19
19
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
2
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
3
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
4
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
5
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
6
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
7
<div id="demo" class="container">
8
<b-form-select
9
v-model="selected"
10
:options="options"
11
size="sm"
12
class="mt-3"
13
></b-form-select>
14
<div class="mt-3">
15
Selected: <strong>{{ selected }}</strong>
16
</div>
17
<b-form-input v-model="text" :placeholder="place()"></b-form-input>
18
<div class="mt-2">Value: {{ text }}</div>
19
</div>