前端学习笔记--vue 动态生成 v-model

核心：

• 创建一个空的数组

selectVal: []

• v-model绑定

v-model="selectVal[index].value"

• 动态生成v-modal

var len = 10;
for (var i = 0; i < len; i++) {
    var item = {value: ''};
    this.selectVal.push(item);
}

代码：

html部分 :

<div id="app">
    <template>
        <Row style="margin: 10px 50px;" v-for="(item,index) in 10">
            <i-col span="4" style="padding-right:10px">
                <i-select
                        v-model="selectVal[index].value"
                        filterable
                        remote
                        :remote-method="remoteMethod"
                        class="currentVal"
                        :current-val="selectVal[index].value"
                        :loading="loading">
                    <i-option v-for="(option, index) in options" :value="option.value"
                              :key="index">{{option.label}}</i-Option>
                </i-select>
            </i-col>
        </Row>
    </template>
    <button @click="handleClick">get value</button>
</div>

js部分：

<script>
    const app = new Vue({
        el: '#app',
        data: {
            selectVal: [],
            loading: false,
            options: [],
            list: [],
            resultArr: []
        },
        created: function () {
            var len = 10;
            for (var i = 0; i < len; i++) {
                var item = {value: ''};
                this.selectVal.push(item);
            }
        },
        methods: {
            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        const list = this.list.map(item => {
                            return {
                                value: item,
                                label: item
                            };
                        });
                        this.options = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1).slice(0, 10);
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            handleClick() {
                let _this = this;
                [].forEach.call(document.querySelectorAll(".currentVal"), function (item) {
                    if (item.getAttribute('current-val') != '') {
                        _this.resultArr.push(item.getAttribute('current-val'))
                    }
                });
                this.$Modal.info({title: '结果', content: this.resultArr});
            }
        },
        mounted() {
            var arr = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming'];
            this.list = arr;
        }
    })
</script>

参考：

https://blog.csdn.net/zhuming3834/article/details/70170305