Vuejs Bootstrap选择文本不更新

Posted 2023-02-22

【中文标题】Vuejs Bootstrap选择文本不更新

【英文标题】：Vuejs Bootstrap select text not updating

【发布时间】：2019-02-27 19:43:54

【问题描述】：

我正在构建一个应用程序，其中我为下拉菜单创建了一个自定义元素。我使用 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)
            ,

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

【参考方案1】：

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

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

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

我有一个 article with a more detailed explanation 以及它损坏和工作的示例。

【参考方案2】：

使用 v-model 指令将元素绑定到 Object 值。在 v-for 中，您还应该声明一个 v-bind:key 值：

<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" v-model="before" v-bind:key="item.value" :value="item.value"> item.name </option>
        <option data-divider="true"></option>
        <option v-for="option in options" v-model="options" v-bind:key="option.valueName" :value="option[valueName]"> option[name] </option>
    </select>
</template>

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

您需要在初始 this.data 导出中将现有行为声明为空对象：

data() 
  return 
    existingActs: ,
  ;
,

将现有Acts 对象添加到您的初始返回中，并结合使用组件中的 v-model="existingActs"，它将元素绑定到 Object 并在它更改时更新它。

更新

尝试使用服务器总线：

@/stores/ServerBus.js 只是一个空的 Vue 实例：

import Vue from 'vue';
export const ServerBus= new Vue();

@/components/voteComponent.vue 文件

// Import the ServerBus Component
import  ServerBus  from "@/stores/ServerBus.js";

// In the Created call, start listening to the 
created() 
    // Begins listening for events from the contentVoteBus
    ServerBus.$on('eventName', (data) => 
        this.parameter = data;
    );
,
mounted() 
    this.getNodeVotes(this.nid);
,
methods: 
    async getNodeVotes(nid) 
        // Fetches votes for the node
        const response = await TestService.fetchNodeVotes(nid,this.userid);
       // Emits the node vote data to the ServerBus
       ServerBus.$emit('eventName', response.data);
    ,
    async submitVote(nid, uid, vote, e) 
        // Submits a users new vote to be inserted or updated in the database
        // If the user has not voted on this item before, it will be an insert.
        // If the user is changing their vote it will be an update.
        // It also returns the updated vote data
        const response = await TestService.submitContentVote(nid,uid,vote);
        // Emits the node vote data to the ServerBus
        ServerBus.$emit('eventName', response.data);
    ,
    async deleteVote(nid, uid, e) 
        // Deletes a users previous vote on a node
        // It also returns the updated vote data
        const response = await TestService.deleteContentVote(nid,uid,0);
        // Emits the node vote data to the ServerBus
        ServerBus.$emit('eventName', response.data);
    ,

,

这是生成 UI 的 Vue：

<b-col class="thumb-button py-3 thumbs-up-button" cols="6">
    <img v-if="voteData.userVoted === true && voteData.userVote === 1" src="@/assets/icons/grey-thumbs-up.png"  title="Remove Thumbs Up Vote" class="p-2 disabled" v-on:click="deleteVote(nid, userid, $event)" />
    <img v-else src="@/assets/icons/green-thumbs-up.png"  title="Thumbs Up" class="p-2" v-on:click="submitVote(nid, userid, 1, $event)" />
</b-col>
<b-col class="thumb-button py-3 thumbs-down-button" cols="6">
    <img v-if="voteData.userVoted === true && voteData.userVote === 0" src="@/assets/icons/grey-thumbs-down.png"  title="Remove Thumbs Down Vote" class="p-2 disabled" v-on:click="deleteVote(nid, userid, $event)" />
    <img v-else src="@/assets/icons/red-thumbs-down.png"  title="Thumbs Down" class="p-2" v-on:click="submitVote(nid, userid, 0, $event)" />
</b-col>

【讨论】：

感谢您的回复，但这并没有奏效。我仍然得到相同的结果。折叠下拉列表时的当前选项仍然是旧选项。然而，vue 开发工具中的所有内容都是正确更新的。我将现有的使徒行传声明为一个空对象，根本什么都没有出现。我已经在第一次使用 halo 测试数据时声明了它

附注当我不使用引导程序选择时，它就像一个魅力

尝试使用服务器总线进行提交。我将更新我的答案，以展示一个示例，说明我如何在一个组件上完成此操作，该组件更新它自己以及没有父子关系的类似兄弟姐妹。