I have a straightforward Vue component that is causing me some trouble.
<template>
<div class="field has-addons">
<div class="control is-expanded">
<div class="select is-fullwidth">
<select v-model="selected" @change="onChange($event)">
<option disabled value="">Select a list for Sync</option>
<option v-for="option in selectOptions" :value="option.id">{{option.name}}</option>
</select>
</div>
</div>
<div class="control">
<a :href="syncUrl">
<div class="button is-success">Sync</div>
</a>
</div>
</div>
</template>
<style scoped>
</style>
<script>
export default {
props: {
lists: String,
training_id: String
},
mounted: function() {
console.log('mounted');
},
computed: {
syncUrl: function () {
return "/admin/trainings/" + this.training_id + "/sync_list_to_training/" + this.selected
}
},
data: function(){
return {
selectedList: '',
selectOptions: '',
selected: ''
}
},
beforeMount() {
this.selectOptions = JSON.parse(this.lists)
this.inputName = this.name
},
methods: {
onChange(event) {
console.log(event.target.value)
}
}
}
</script>
Although the component appears to be working fine and I am able to display the select with options and values, it does not show up in the Vue Inspector tool. Additionally, the select functionality does not work as expected. Even after making changes to simplify the component, like in the "Vue Example" provided below:
<template>
<div class="field has-addons">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</template>
<style scoped>
</style>
<script>
export default {
data: function(){
return {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
}
}
</script>
Even with these modifications, the component remains problematic and is still not visible in the inspector tool. The code snippet below shows how I tried to invoke the components using Vue and Turbolinks:
import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter)
import ActiveCampaign from '../../../application/components/active_campaign/ActiveCampaign.vue'
document.addEventListener('turbolinks:load', () => {
const vueApp = new Vue({
el: '#app-container',
components: {
'active_campaign': ActiveCampaign,
},
})
})
There are no errors in the console, only a message stating "Detected Vue v2.6.10" from vue-devtools.