When I attempt to structure my component in the following way:
<script>
export default {
template: '\
<select class="form-control" v-on:change="search">\
<option v-for="option in options" v-bind:value="'+option.id+'|'+option.name+'">{{ option.name }}</option>\
</select>',
mounted() {
...
},
...
};
</script>
I am separating the values using the separator |
This means I will be utilizing a split function to extract the id and name values.
However, when attempting this approach, an error occurs:
Uncaught ReferenceError: option is not defined
How can I resolve this issue?