Vue组件部分起作用,未出现在Vue检查器中

问题描述 投票:1回答:1

我有一个非常简单的vue组件

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

它有效,我可以显示选择内容以及我的选项和值。顺便说一句,该组件没有出现在Vue Inspector中,也没有道具或数据检查。选择不起作用。我已经在日志中“挂载”,选择中填充了道具中的正确数据。但是,当我看到一个选项时,不会触发change事件。为什么?该组件正在工作,而不工作,我找不到解决方案。

编辑:即使我将组件更改为“ 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>

是无效的,我无法在检查器中看到它...这里是调用

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

控制台中没有错误:检测到vue-devtools Vue v2.6.10

我有一个非常简单的vue组件

javascript vue.js
1个回答
0
投票
来自文档:
© www.soinside.com 2019 - 2024. All rights reserved.