Vue 1.x Sync Query Mixin Example

Modify both input boxes and query string of the URL, to see how they keep in sync

$route.query: {{ $route.query | json }}

$vm.$data: {{ $data | json }}

a: b: c:
d: {{ d | json }}
e: f: g:

/**************** Source Code ****************/
var App = {
  mixins: [VueSyncQuery.default],
  data: function () {
    return { a: 1, b: 2, c: 3, d: [4, 4, 4, 4], e: 5, f: 6, g: 7 };
  },
  ready: function () {
    this.syncQuery('a');
    this.syncQuery(['b', 'c']);
    this.syncQuery({
      localField: 'd',
      queryField: 'dddd',
      local2query: function (v) {
        return v.join(',');
      },
      query2local: function (v) {
        // return falsy value meaning restore the default value
        return v ? v.split(',') : null;
      }
    });
    this.syncQuery([
      'e', // same as { localField: 'e', queryField: 'e' }
      { localField: 'f', queryField: 'ffffff' }
    ]);
    this.syncQuery({
      localField: 'g',
      queryField: 'ggggggg',
      local2query: { immediate: true }
    });
  }
};

var router = new VueRouter();
router.map({ '/': { component: {} } });
router.start(App, '#app');
Vue.config.devtools = true;