# 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>