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'],
        };
    },
};

« ~/.ssh/config - Ansible cheatsheet »