Vue.js模型绑定到jQuery输入

Question

How do you bind an input using vue.js when the input is rendered using a jquery plugin such as datepicker. 使用jquery插件（如datepicker）呈现输入时，如何使用vue.js绑定输入。 In my example below the two way binding doesnt work for the jquery colourpicker. 在下面的示例中，两种方式的绑定不适用于jQuery colourpicker。 When I change the color it doesn't change the corresponding vue value: 当我更改颜色时，它不会更改相应的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>

*** UPDATE **** ***更新****

I've manage to get something working using the following directive, the only problem is when the page first loads, each picker isn't selected with the correct color as per the cars array - they all load with the first option as selected - do i need to add an onload method to the directive below: 我已经设法使用以下指令进行工作，唯一的问题是，页面首次加载时，每个选择器都没有按照cars数组选择正确的颜色-它们都加载了选择的第一个选项-做我需要在以下指令中添加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')
      }
    })

Answer 1

You should modify your vue model to include a selected property, as explained in the vuejs documentation ( http://vuejs.org/guide/forms.html#Select ), and an options property (you could use cars as you have it now) 如vuejs文档（ http://vuejs.org/guide/forms.html#Select ）中所述，您应该修改vue模型以包含选定的属性，以及options属性（您可以像现在那样使用汽车））

This is how I changed the select: 这就是我更改选择的方式：

<select name="colorpicker" v-model="selected">
 <option v-for="option in cars" v-bind:value="option.color">
  {{ option.color }}
 </option>
</select>

This is how I changed the js: 这就是我改变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();
 });

Vue.js模型绑定到jQuery输入

问题描述

1 个解决方案

解决方案1
0 2015-12-29 15:02:44

Vue.js模型绑定到jQuery输入

问题描述

1 个解决方案

解决方案1 0 2015-12-29 15:02:44

解决方案1
0 2015-12-29 15:02:44