# v-model Everything
对象保持与组件状态绑定,形成数据和组件的映射。
# use case
<template>
<div>
<kube-table-dynamic v-model="demos"/>
</div>
</template>
<script>
import table from './table.vue';
export default {
components: {
'kube-table-dynamic': table,
},
data() {
return {
demos: [],
}
},
}
</script>
# makeVModelMixin
export const makeVModelMixin = {
props: {
value: {
type: [ String, Number, Boolean, Array, Object ],
require: true,
},
},
model: {
event: 'change',
prop: 'value',
},
computed: {
model: {
get() {
return this.value;
},
set(val) {
this.$emit('change', val);
},
},
},
};
# table.vue
<template>
<kube-dynamic-block
v-model="model"
style="width: 100%;"
:data-template="getDataTemplate"
>
<template slot="column">
<th>A</th>
<th>B</th>
<th>C</th>
</template>
<template slot-scope="{ model: row, index }">
<td>
<u-input v-model="row.a" />
</td>
<td>
<u-input v-model="row.b" />
</td>
<td>
<u-input v-model="row.c" />
</td>
</template>
</kube-dynamic-block>
</template>
<script>
import kubeDynamicBlock from '@kubecube/common/kube-dynamic-block.vue'
import { makeVModelMixin } from '@kubecube/mixins/functional';
export default {
mixins: [ makeVModelMixin ],
components: {
'kube-dynamic-block': kubeDynamicBlock
},
methods: {
getDataTemplate() {
return {
a: '',
b: '',
c: ''
}
}
}
}
</script>
<style>
</style>