I am currently working with a Vue component that looks like this:
<script>
export default{
template: '\
<select class="form-control" v-model="selected" v-on:change="search">\
<option v-for="option in options" v-bind:value="option.id" v-bind:disabled="option.disabled">{{ option.name }}</option>\
</select>',
mounted() {
this.fetchList();
},
data() {
return {
selected: '',
options: [{id: '', name: window.trans.category.select}]
};
},
methods: {
search(e){
window.location = window.BaseUrl + '/search?q=&cat=' + e.target.value;
},
fetchList: function() {
this.$http.post(window.BaseUrl+'/category/list?parent_id=all').then(function (response) {
response.data.forEach(function(item){
this.options.push({id:item.id, name:item.name})
}, this);
});
},
}
};
</script>
When a category is clicked, I want to retrieve the text of the category.
In my code above, I am using e.target.value to get the selected id and it works fine.
However, I am struggling to find a way to get the selected text when a category is clicked.
I tried using e.target.text, but it did not work as expected.
If anyone has a solution or suggestion, I would greatly appreciate the help.