Vuejs Bootstrap выделить текст не обновляется

Question

Я создаю приложение, в котором я создал собственный элемент для выпадающего меню.Я использую Bootstrap select для рендеринга выпадающих меню.Когда я обновляю значения для 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)
            },

Есть идеи, что я могу попробовать?Мой поиск в гугле вышел из списка наблюдателей или компьютерной собственности, но я не смог заставить ее работать.

Answer 1

Попробуйте добавить следующее к вашей «смонтированной» функции после вызова vm. $ Set (...):

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

Будет лучше, если вы сможете получить только этот компонент

У меня есть статья с более подробным объяснением и его примеры не работают иработа.

Answer 2

Используйте директиву v-модели, чтобы связать элементы со значениями объекта.В 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: {},
  };
},

Добавление существующего объекта Act к вашему начальному возвращению в сочетании с использованием в вашем компоненте v-model = "existActs" приведет к привязке элемента к объекту и его обновлению при его изменении.

ОБНОВЛЕНИЕ

Попробуйте использовать серверную шину:

@/stores/ServerBus.js - это просто пустой экземпляр Vue:

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

@ / components /файл voiceComponent.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);
    },

},

А вот 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" alt="Remove Thumbs Up Vote" 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" alt="Thumbs Up" 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" alt="Remove Thumbs Down Vote" 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" alt="Thumbs Down" title="Thumbs Down" class="p-2" v-on:click="submitVote(nid, userid, 0, $event)" />
</b-col>