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

Question

I have a table where for each row the first <td> contains a select element. The select element renders out of a child component, which uses bootstrap's 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>

The component is registered separately in a globals file, and it is rendering fine. When a select element is changed in the table - A1 - I need all of the values in B1, C1, D1 etc to update. This isn't happening with what I have setup now.

Any help is very much appreciated.

Here is another instance of the selectpicker in a parent component.

<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

Simplify the Selectpicker.vue file

You don't need to do all this 'observe' stuff below. Just bind a value and let Vue do the observing. That's what it is good at . Remove all this:

    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)
        }
    }

Make it into something like (notice the "observer" stuff code above was removed and two attributes were added to the template):

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

Simple, yeah?