Vue.js tips and tricks

Bootstrap table style not working?

Use <thead> and <tbody>.

v-model in Components

<template>
  <input @input="handleInput" />
</template>
export default {
  prop: ['value'],
  data () {
    return {
      content: this.value
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', this.content)
    }
  }
}
<input v-model="email" />
<input :value="email" @input="e => email = e.target.value" />

v-model with custom prop and event in Components

export default {
  prop: ['hidden'],
  model: {
      prop: 'hidden',
      event: 'blur'
  }
  methods: {
      handleInput (value) {
          this.$emit('blur', value)
      }
  }
}
<basic-input v-model="email" />
<basic-input :hidden="email" @blur="e => email = e.target.value" />

Sources:

Init with data from dataset

export default {
    data() {
        return {
            id: this['$root']['$el']['dataset']['id'],
        };
    },
};

Version 2:

index.html:

    <div id="app" data-id="123"></div>

index.js:

    (function (el) {

        new Vue({
            el,
            render: h => h(Module),
            data: () => Object.assign({}, el.dataset) ,
        });

    })(document.getElementById('app'));

Module.vue:

    export default {
        name: 'Module',
        data() {
            return {
                id: this.$parent.id,
            };
        },
    };

Version 3:

    (function (el) {

        new Vue({
            el: el,
            render: h => h(Module),
            propsData: {
                ...el.dataset
            }
        });

    })(document.getElementById('app'));

« ~/.ssh/config - Ansible cheatsheet »