当使用 jquery 插件(例如 datepicker)渲染输入时，如何使用 vue.js 绑定(bind)输入。在下面的示例中，两种方式绑定(bind)不适用于 jquery colorpicker。当我更改颜色时，它不会更改相应的 vue 值:
<html>
<head>
<meta charset="UTF-8">
<title>Color picker for jQuery</title>
<meta name="description" content="A very simple jQuery color picker plugin">
<link rel="stylesheet" href="jquery.simplecolorpicker.css">
<link rel="stylesheet" href="jquery.simplecolorpicker-regularfont.css">
</head>
<body>
<div id="cars">
<table>
<tr v-for="car in cars">
<td>
<input name="name" type="text" v-colorpicker="car.name">
</td>
<td>
<select class="colorpicker" name="color" v-model="car.color">
<option value="#cc6699">#cc6699</option>
<option value="#993366">#993366</option>
<option value="#cc3333">#cc3333</option>
<option value="#336699">#336699</option>
</select>
</td>
</tr>
</table>
<pre>{{$data | json }}</pre>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="jquery.simplecolorpicker.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
<script>
new Vue({
el: '#cars',
data: {
cars: [{
name: 'Toyota',
color: '#cc6699'
}, {
name: 'Nissan',
color: '#336699'
}]
}
});
$('select.colorpicker').simplecolorpicker({
picker: true,
theme: "regularfont"
});
</script>
</body>
</html>
*** 更新 ****
我已经设法使用以下指令来完成一些工作，唯一的问题是当页面首次加载时，每个选择器都没有根据汽车数组选择正确的颜色 - 它们都使用第一个选项加载已选择 - 我是否需要向以下指令添加 onload 方法:
Vue.directive('colorpicker', {
twoWay: true,
priority: 1000,
params: ['options'],
bind: function () {
var self = this
$(this.el)
.simplecolorpicker({
picker: true,
theme: "regularfont"
})
.on('change', function () {
self.set(this.value)
})
},
update: function (value) {
$(this.el).val(value).trigger('change')
},
unbind: function () {
$(this.el).off().simplecolorpicker('destroy')
}
})
最佳答案
您应该修改您的 vue 模型以包含选定的属性，如 vuejs 文档 ( http://vuejs.org/guide/forms.html#Select ) 中所述，以及选项属性(您可以使用现在拥有的汽车)
这就是我更改选择的方式:
<select name="colorpicker" v-model="selected">
<option v-for="option in cars" v-bind:value="option.color">
{{ option.color }}
</option>
</select>
这就是我改变js的方式:
var vueModel = new Vue({
el: '#cars',
data: {
selected: '#cc6699',
cars: [
{name: 'Toyota', color: '#cc6699'},
{name: 'Nissan', color: '#336699'},
{name: 'Nissan', color: '#333333'}
]
}
});
$('select[name="colorpicker"]')
.simplecolorpicker({
'selectColor': '#cc6699',
picker: true})
.on('change', function() {
vueModel.selected = $('select[name="colorpicker"]').val();
});
关于javascript - Vue.js 模型绑定(bind)到 jquery 输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34511717/