Vue component work partially and doesn't appear in Vue inspector

Question

I have a very simple vue component

<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>

It works, I can display the select with my options and value. By the way the component doesn't appear in Vue Inspector, no props or data inspection. And the select doesn't work. I have "mounted" in my log, the select is populated with the right data from the props. But when I seelct an option the change event is not fired. Why? The component is working and not working, i cannot find a solution.

Edit: even if I change the component to the "vue Example"

<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>

Is doesn't work and I cannot see it in inspector... Here is the invocation

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,
    },
  })
})

No error in console: vue-devtools Detected Vue v2.6.10

@webprogrammer I added an info... also the standard select example doesn't work. PS: I have other components on the same app and they are working — Roberto Pezzali

webprogrammer webprogrammer · Accepted Answer · 2020-01-25T15:00:08

UPD:

Can you try this?

Another hack is to wait for the next tick:

<input type="checkbox" v-model="myModel" @change="myFunction()">

...

myFunction: function() {
    var context = this;
    Vue.nextTick(function () {
        alert(context.myModel);
    }
}

This is from here https://github.com/vuejs/vue/issues/293#issuecomment-265716984

Vue component work partially and doesn't appear in Vue inspector

1 Answers