How to get value selected in select component to use in another component using Vue
Miriam Arbaji
I have the following template
<div class="container">
<div class="row">
<div class="col-lg-5 filter big">
<select v-model="stc" @change="getData" name="new" title="country">
<option value="">all</option>
<option v-for="country in data.countries_list" v-bind:key="country.id" v-bind:value="country.id">
{% verbatim %}
{{ country.name }}
{% endverbatim %}
</option>
</select>
</div>
<div class="col-lg-7">
travels
<p>
{% verbatim %}
{{ data.travels }}
{% endverbatim %}
</p>
</div>
</div>
</div>
The Vue part is
new Vue({
el: `#${STSAppID}`,
data: {
data: {},
},
created() {
this.getData()
},
methods: {
refreshSelects() {
refreshSelects()
},
getData() {
const that = this
const url = apiBase + "std/"
axios.get(url).then(function(response) {
that.data = response.data
that.refreshSelects()
})
},
},
computed: {},
})
What I want to do is to check the selected value {{ country.name }}inside another div to <div class="col-lg-7">be able to write something like
<div class="col-lg-7">
travels
***if country.name which is the selected option equals something then display the below p element***
<p>
{% verbatim %}
{{ data.travels }}
{% endverbatim %}
</p>
</div>
can i do this?
Ashwin Strip
If there isv-if
You can test the condition like this
<div class="col-lg-7">
travels
***if country.name which is the selected option equals something then display the below p element***
<p v-if="stc === something"> <!-- 'stc' is v-model to select --->
{% verbatim %}
{{ data.travels }}
{% endverbatim %}
</p>
</div>