Vue-strap pouchdb sync

Vue-strap pouchdb couchdb sync

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.0.3/vue-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/5.1.0/pouchdb.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/0.7.7/vue-router.min.js"></script>
<div id="app">
  <alert :show.sync="showRight" duration="30" type="success" width="400px" placement="top-right" dismissable>
    <span class="icon-ok-circled alert-icon-float-left"></span>
    <strong>Well Done!</strong>
    <p>You successfully read this important alert message.</p>
  </alert>

  <aside :show.sync="showR" placement="right" header="Title" :width="350">
    <p>
      hello
    </p>
  </aside>

  <tabs>
    <tab header="one">
      <v-select v-bind:value="values">
        <v-option value="Apple"></v-option>
        <v-option value="Banana"></v-option>
        <v-option value="Cherry"></v-option>
      </v-select>
    </tab>
    <tab header="two">
      <button class="btn btn-default btn-lg" @click="showRight = !showRight">
        Click to toggle alert on right
      </button>
      <button class="btn btn-success btn-lg" @click="showR = true">Show Aside on right</button>
    </tab>
    <tab header="db">
      <button @click="openlocdb">Open local DB</button>
      <button @click="openremdb">Open remote DB</button>
      <button @click="opendbs">Open DBs with sync</button>
      <button @click="write_doc">write_doc</button>
      <ul>
        <li v-for="row in rows" track-by="id">
          {{ row.doc.title }}
        </li>
      </ul>
    </tab>
    <tab header="settings">
      <input v-model="settings.db_local" placeholder="Local DB name">
      <input v-model="settings.db_url"...

JavaScript

var vm = new Vue({
	el: '#app',
	data: {
		values:[],
		showRight: false,
		showR: false,
		db: {
    	db1: null,
      dbs: null
    },
		settings: {
      db_local: null,
      db_url: null,
      db_username: null,
   		db_password: null
    },
    secret: null,
    rows: [{title: "abc"}]
  },
  methods: {
  	load: function () {
  	 	for (var k in this.settings) {
      	this.settings[k]=CryptoJS.AES.decrypt(localStorage.getItem(k),
        	this.secret).toString(CryptoJS.enc.Latin1)
      }
  	},
  	save: function () {
      for (var k in this.settings) {
      	localStorage.setItem(k,CryptoJS.AES.encrypt(this.settings[k],this.secret))
      }
    },
    openlocdb: function() {
      console.log("opening local db");
    	this.db.db1 = new PouchDB(this.settings.db_local);
      this.get_docs();
    },
    openremdb: function () {
     	var options = {};
      options.auth = {};
     	options.auth.username = this.settings.db_username;
     	options.auth.password = this.settings.db_password;
      this.db.dbs = new PouchDB(this.settings.db_url, options);
      this.get_docs();
    },
    opendbs: function () {
    	this.db.db1 = new PouchDB(this.settings.db_local);
      this.openremdb();
    	PouchDB.sync(this.db.db1, this.db.dbs, {live: true});
      this.db.db1.changes({
  			since: 'now',
  			live: true
      }).on('change', this.get_docs);
    },
    write_doc: function() {
    	docs[0]._id = new Date().toISOString();
  		this.db.db1.put(docs[0], function callback(err, result) {
    		if (!err) {
      		console.log('Successfully posted a doc!');
    		} else {
      	 	console.log('Error');
        }
  		});
      this.get_docs();
		},
    get_docs: function() {
     	var self = this;
      console.log("getting");
  		self.db.db1.allDocs({include_docs: true, descending: true})
      .then(function(doc) {
      		console.log(doc.rows[0]);
    			self.rows = doc.rows;
    		})
      .catch(function (err) {
  				console.log(err);
    	})
  	}
  },
 ...