[英]Vue custom directive
I need to have multiple select in Vue withut library.我需要在没有库的 Vue 中进行多项选择。 I found a good jsFiddle code.
我找到了一个很好的 jsFiddle 代码。 Here:
这里:
https://jsfiddle.net/02rafh8p/
I have write this directive in another js to have it globally like this:我已经在另一个 js 中编写了这个指令,以便像这样在全局范围内使用它:
import Vue from 'vue';
export const Select = {
twoWay: true,
priority: 1000,
params: ['options'],
bind: function() {
let self = this;
$(this.el)
.select2({
data: this.params.options
})
.on('change', function() {
self.set($(self.el).val())
})
},
update: function(value) {
$(this.el).val(value).trigger('change')
},
unbind: function() {
$(this.el).off().select2('destroy')
}
}; };
Vue.directive('select', Select); Vue.directive('select', Select);
And here is my component where I want to have my custom directive:这是我想要自定义指令的组件:
<template>
<div id="el">
<p>Selected: {{selected}}</p>
<select v-select="selected" multiple :options="roles2" style="width: 400px; height: 1em;">
<option value="0">default</option></select>
</div>
</template>
import {Select} from '../select.js';
export default {
directives: {
Select
},
data() {
return {
form: new Form({
memberId: this.member.id,
firstname: this.member.user.firstname,
lastname: this.member.user.lastname,
email: this.member.user.email,
roles: Object.values(this.member.actual_roles),
rate: this.member.billing.rate,
currency: this.member.billing.currency_id,
type: this.member.billing.type
}),
fullname: this.member.user.full_name,
selected: [],
roles2: [
{id: 1, text: 'hello'},
{id: 2, text: 'what'}
]
}
},
}
And first error is :第一个错误是:
TypeError: Cannot read property 'el' of undefined
When I change in select.js this piece:当我更改 select.js 时:
let self = this;
$(this.el) => hange to : $('#el')
.select2({
data: this.params.options
}) ...
then I have another error:然后我有另一个错误:
TypeError: Cannot read property 'params' of undefined
This is my first custom directive and I don't know why It doesn't work completley.这是我的第一个自定义指令,我不知道为什么它不能完全工作。 Can someone help me to figure it out?
有人可以帮我弄清楚吗? I don't even know or my jQuery to find #el is goood :(
我什至不知道或者我的 jQuery 找到#el 是好的 :(
The vue version of your fiddle is 1.0.16.您的小提琴的 vue 版本是 1.0.16。 https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js
https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js
I think you are using latest version of vue.我认为您使用的是最新版本的 vue。 So you will need to following the guide https://v2.vuejs.org/v2/guide/custom-directive.html .
所以你需要遵循指南https://v2.vuejs.org/v2/guide/custom-directive.html 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.