我有一个非常简单的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组件<input type="checkbox" v-model="myModel" @change="myFunction()">
...
myFunction: function() {
var context = this;
Vue.nextTick(function () {
alert(context.myModel);
}
}
这是从这里https://github.com/vuejs/vue/issues/293#issuecomment-265716984开始