# Dynamic
# Pass dynamic props
# Vue
<input v-bind="attrObj" :maxlength="maxlength" />
computed: {
attrObj() {
return {
color: 'red',
// ...
}
}
}
# React
<input {...dynamicProps} />
# Dynamic Classes
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
# Dynamic Component
<component :is="componentDisplay" v-bind="$props" />
import AComponent from './AComponent';
import BComponent from './BComponent';
const displayMapping = {
'A': AComponent,
'B': BComponent,
}
export default {
data() {
return {
display: 'A'
}
},
computed: {
componentDisplay() {
return displayMapping[this.display];
}
}
}
Read docs 4 more Detail (opens new window)
# [VueX] Dynamic Module
# Register
store.registerModule( moduleName, {
namespaced: true,
state: {
//...
},
getters: {
//...
},
actions: {
//...
},
mutations: {
//...
}
});
# Unregister
store.unregisterModule(moduleName);