我正在构建一个应用程序,我已经为下拉列表创建了一个自定义元素。我使用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)
},
知道我能尝试什么吗?我的谷歌搜索出现在观察者或计算机财产上,但我无法让它工作。
使用v-model指令将元素绑定到Object值。在v-for中,您还应该声明一个v-bind:键值:
<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>
您需要在inital this.data导出中将existingActs声明为空对象:
data() {
return {
existingActs: {},
};
},
将existingActs对象添加到初始返回中,并结合使用组件中的v-model =“existingActs”,它将元素绑定到Object并在更改时更新它。
UPDATE
尝试使用服务器总线:
@ / 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" 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>
在vm。$ set(...)调用之后尝试将以下内容添加到'mount'函数中:
vm.$nextTick(function(){ $('.FT-picker').selectpicker('refresh'); });
如果你能得到那个组件的<select>(也许是通过使用vm。$ refs?)会更好,所以代码只更新组件中的那个;否则使用上面的行将更新所有共享同一类'FT-picker'的HTML元素。
我有一个article with a more detailed explanation和它破碎和工作的例子。