How to call a method or directive inside interpolated strings? - vue.js

Question

I want to log the value of the options on change.
The only problem is that I am using it inside string interpolation.
createStickyToolBox() {
const fonts = ['Pacifico', 'VT323', 'Quicksand', 'Inconsolata', 'Times New Roman'];
const options = fonts.map((font) => `<option value="${font}"> ${font} </option>`);
const div = document.createElement('div');
div.id = 'container';
div.innerHTML = `<select id="test" name="form-select" ${options} </select>`;
div.className = 'sticky-toolbox';
div.style = `position: absolute; top: ${topOffset}px; left: ${leftOffset}px;`;
document.getElementById('canvas-wrapper').appendChild(div);
},
In the innerHtml element is the select tag with the options defined above. How can I access the values and log them for example?

Answer 1

One of the super-powers of Vue.js relies on its component-oriented architecture.
While your snippet above could, in theory, work, it doesn't benefit from the advantages that Vue.js has to offer as a framework.
A much cleaner approach, would be to create a Vue.js component:
<template>
<div :style="{ top: topOffset + 'px', left: leftOffset + 'px' }" id="container">
<select id="test" name="form-select">
<option #change="log" v-for="option in options" :value="option">
{{ option }}
</option>
</select>
</div>
</template>
<script>
export default {
props: ['options', 'topOffset', 'leftOffset'];
data() {return {};},
methods: {
log(event) {
console.log(event.target.value);
}
}
};
</script>
<style scoped>
#id {
positon: absolute;
}
</style>
And, in the parent component, use the children as follows:
<template>
<div id="canvas-wrapper">
<button #click="addContainer" type="button"> Add new container </button>
<custom-container v-for="container in containers" :options="container.options" :topOffset="container.topOffset" :leftOffste="container.leftOffset"/>
</div>
</template>
<script>
import Container from './Container.vue';
export default {
components: { Container },
data() {
return {
containers: []
};
},
methods: {
addContainer() {
let newContainer = {
options: ['Pacifico', 'VT323', 'Quicksand', 'Inconsolata', 'Times New Roman'],
topOffset: 5,
leftOffset: 10,
};
this.containers.push(newContainer);
}
}
};
</script>
<style scoped>
#id {
positon: absolute;
}
</style>