时间戳

首页 > 解决方案 > Vuejs Bootstrap选择文本不更新

javascript - Vuejs Bootstrap选择文本不更新

问题描述

我正在构建一个应用程序，其中我为下拉菜单创建了一个自定义元素。我使用 Bootstrap 选择来呈现下拉菜单。当我更新 select 的值时，它的所有方面都会发生变化，除了选项中的文本值。但是当我选择带有旧文本的选项时，会显示新文本。请看下面的图片：

在此处输入图像描述

在此处输入图像描述

这是下拉组件的代码：

<template>
<select :data-row-id="rowId" :title="placeholder" :data-live-search="search" v-on:change="$emit('change', $event)" class="FT-picker">
    <option v-if="before" v-for="item in before" :value="item.value">{{ item.name }}</option>
    <option data-divider="true"></option>
    <option v-for="option in options" :value="option[valueName]">{{ option[name] }}</option>
</select>
</template>

<script>
    export default {
        props: {
            options: {
                type: Array,
                required: true
            },
            name: {
                type: String,
                required: true
            },
            valueName: {
                type: String,
                required: true
            },
            search: {
                type: Boolean,
                required: false,
                default: false
            },
            placeholder: {
                type: String,
                required: false
            },
            before: {
                type: Array,
                required: false,
            },
            rowId: {
                type: Number,
                required: false
            }
        }
    }
</script>

这是组件以及我如何更新它

    <keep-alive>
        <select-picker
        :options="exisitngActs"
        name="name"
        valueName="id"
        search
        ></select-picker>
    </keep-alive>

在安装：

getExistingActs() {
                var vm = this
                axios.post('/get-all-acts', {
                })
                    .then(function(response) {
                        for(var x in response.data) {
                            vm.$set(vm.exisitngActs, x, response.data[x])
                        }

                    })
                    .catch(function (error) {
                        console.log(error)
                    })
                console.log(vm.exisitngActs)
            },

知道我可以尝试什么吗？我的谷歌搜索出现在观察者或计算属性上，但我无法让它工作。

标签： javascriptjquerylaravelvue.jsbootstrap-select

解决方案

尝试在 vm.$set(...) 调用之后将以下内容添加到“已安装”函数中：

vm.$nextTick(function(){ $('.FT-picker').selectpicker('refresh'); });

如果你能得到那个组件的 <select> 会更好（也许通过使用 vm.$refs？）所以代码只更新你组件中的那个；否则，使用上面的行将尝试更新共享同一类“FT-picker”的所有 HTML 元素。

我有一篇文章，其中包含更详细的解释以及它损坏和工作的示例。

推荐阅读