Я хочу, чтобы компонент select2 внутри другого компонента использовал его.Я импортировал это, но не могу заставить это работать.У меня есть компонент app.vue и компонент select2.vue.
<template>
<select2 :options="this.options" v-model="selected">
<option disabled value="0">Select one</option>
</select2>
</template>
<script>
import select2 from 'select2'
export default {
name: 'app',
data(){
return{
options : [
{ id: 1, text: 'Hello' },
{ id: 2, text: 'World' }
],
selected: 1,
}
},
components: {
'select2': select2,
}
}
</script>
У меня есть компонент select2, подобный этому:
<script>
Vue.component('select2', {
props: ['options', 'value'],
template: '#select2-template',
mounted: function () {
var vm = this
$(this.$el)
// init select2
.select2({ data: this.options })
.val(this.value)
.trigger('change')
// emit event on change.
.on('change', function () {
vm.$emit('input', this.value)
})
},
watch: {
value: function (value) {
// update value
$(this.$el)
.val(value)
.trigger('change')
},
options: function (options) {
// update options
$(this.$el).empty().select2({ data: options })
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
})
</script>
и HTML-код, подобный этому:
Я получаю ошибку, подобную этой:
[Vue warn]: Error in render: "TypeError: Cannot read property 'getAttribute' of undefined"
Я очень новичок в Vuejs.Я не могу понять, где это идет не так.Помогите мне, пожалуйста.спасибо