Vue.js model binding to a jquery input

Question

How do you bind an input using vue.js when the input is rendered using a jquery plugin such as datepicker. In my example below the two way binding doesnt work for the jquery colourpicker. When I change the color it doesn't change the corresponding vue value:

<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:

  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')
      }
    })

For every car, wouldn't there be a select.colorpicker instance? Which one would jquery change? Try generating an id using the car $index and use that selector. — notANerdDev
– notANerdDev, Commented Dec 29, 2015 at 14:17
Also, i tried pasting your code to try it, but chrome throws errors regarding your github files. Could you create a fiddle, in case my previous advice doesn't work? — notANerdDev
– notANerdDev, Commented Dec 29, 2015 at 14:19
the simple color picker is using the css class colorpicker to wire it up and yes it is rendered next to each car. The color picker works fine but the two way binding doesn't work. If you look at the data in the pre tag you can see the data value doesnt change when you select different colors. — adam78
– adam78, Commented Dec 29, 2015 at 15:34
you can test on plunker by copying the above html and pasting into the following: plnkr.co/edit/VVclW0?p=preview — adam78
– adam78, Commented Dec 29, 2015 at 16:13
simplecolorpicker library requires separate directives to function with JS frameworks. You'll have to make one for Vue. They have one for angular 1.x on their github repo and another for ruby. Trying to replicate the logic, but haven't reached far.. — notANerdDev
– notANerdDev, Commented Dec 29, 2015 at 17:32

Nora · Accepted Answer · 2015-12-29 16:39:43Z

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)

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:

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();
 });

edited Dec 29, 2015 at 16:39

answered Dec 29, 2015 at 15:02

Nora

3,2812 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

adam78 Over a year ago

Not sure what you mean. I already have a selected property v-model="car.color"

Nora Over a year ago

Yes @user3324298, you are right, there are problems with including the jquery plugin

adam78 Over a year ago

There are no issues with the jquery plugin.

adam78 Over a year ago

no errors. The fiddle probably doesn't work because the stylesheet sheets arnt rendering. I dont know how to copy the style sheets to somewhere locally using a fiddle but on my own pc I've copied them and the picker works, its just the two way binding with vue doesnt work.

adam78 Over a year ago

Use can test by copying the html above and pasting into the following: plnkr.co/edit/VVclW0?p=preview

|

Collectives™ on Stack Overflow

Vue.js model binding to a jquery input

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related