v-for 中用于引导选择器的 Vue.js 子组件

Question

我有一个表格，其中每一行的第一个 <td> 包含一个选择元素。 select 元素从子组件中渲染出来，该子组件使用 bootstrap 的 selectpicker。

Selectpicker.vue

<template>
    <div class='select-picker'>
        <select ref='selectpicker'>
            <slot></slot>
        </select>
    </div>
</template>

<script>
    export default {
        props: {
            initVal: [String,Object],
            default: ''
        },
        data(){
            return {
            }
        },
        mounted(){
            var selectpicker = $(this.$refs.selectpicker)
            this.selectpicker_dom_ref = selectpicker.selectpicker() // initialize

            this.selectpicker_dom_ref.selectpicker('val', this.initVal) // set initial value

            // Create the observer
            this.observer = new MutationObserver(() => { this.selectpicker_dom_ref.selectpicker('refresh') })

            // Setup the observer
            this.observer.observe(this.$refs.selectpicker, {childList: true})

            this.selectpicker_dom_ref.on('changed.bs.select', val => this.$emit('change', val))

        },
        watch: {
            value: function(val){
                this.selectpicker_dom_ref.selectpicker('val', val)
            }
        }
    }
</script>

ParentComponent.vue

<template>
    <table>
    <tr 
        v-for="(item, index) in rows" 
        :key="item.row_id">
            <td>
                <selectpicker 
                    v-model="item.item_id" 
                    :initVal="item.item_id">
                        <option 
                            v-for="opt in opts" 
                            :key="opt.item_id" 
                            :value="opt.item_id">
                            {{opt.name}}
                        </option>
                </selectpicker>
            </td>
            <td 
                v-for="column in columns" 
                :key="column">
                {{getOptById(item.item_id)[column]}}
            </td>
    </tr>
    </table>
</template>

<script>
export default {
    data() {
        return {
            columns: ['a', 'b', 'c', 'd']
            opts: [{'item_id':'123', 'name': 'xyz', 'a': 'aVal', 'b': 'bVal', 'c': 'cVal', 'd': 'dVal'}], // every selectpicker has the same options, every option has values corresponding to each column
            rows: [{'row_id': 'row1', 'item_id': '123'}],
        }
    },

    mounted() {
        const $el = $(this.$el)
        const self = this
    },

    methods: {
        getOptById(item_id) {
            return _.find(this.opts, {
                item_id
            }) || {}
        },
        updateRows(){
            _.each(this.rows, (item, index) => {
                item.row_order = index
            })
        }
    },

    watch: {
        rows: function(value, old_value) {
            this.updateRows()
        }
    }
}

</script>

组件在全局文件中单独注册，并且渲染良好。当表中的选择元素发生更改时 - A1 - 我需要更新 B1、C1、D1 等中的所有值。我现在的设置不会发生这种情况。

非常感谢任何帮助。

这里是父组件中选择器的另一个实例。

<selectpicker
    class="bgs-location"
    @change="handleLocationSelect">
        <optgroup
            v-for="(locationGroup, groupName) in locationsByGroup"
            :key="groupName"
            :label="groupName">
                <option
                    v-for="location in locationGroup"
                    :key="location.guid"
                    :value="JSON.stringify(location)">
                    {{location.name}}
            </option>
        </optgroup>
    </selectpicker>

Answer 1

简化Selectpicker.vue 文件

你不需要在下面做所有这些“观察”的事情。只需绑定一个值并让 Vue 进行观察。这就是 它擅长的。 删除所有这些：

    mounted(){
        var selectpicker = $(this.$refs.selectpicker)
        this.selectpicker_dom_ref = selectpicker.selectpicker() // initialize

        this.selectpicker_dom_ref.selectpicker('val', this.initVal) // set initial value

        // Create the observer
        this.observer = new MutationObserver(() => { this.selectpicker_dom_ref.selectpicker('refresh') })

        // Setup the observer
        this.observer.observe(this.$refs.selectpicker, {childList: true})

        this.selectpicker_dom_ref.on('changed.bs.select', val => this.$emit('change', val))

    },
    watch: {
        value: function(val){
            this.selectpicker_dom_ref.selectpicker('val', val)
        }
    }

让它变成类似的东西（注意上面的“观察者”东西代码被删除了，两个属性被添加到模板中）：

<template>
    <div class='select-picker'>
        <select ref='selectpicker' :value="initVal" @change="$emit('input', $event.target.value)">
            <slot></slot>
        </select>
    </div>
</template>

<script>
    export default {
        props: {
            initVal: [String,Object],
            default: ''
        },
        mounted(){
            $(this.$refs.selectpicker).selectpicker() // initialize
        }
    }
</script>

简单吧？