如何根据资源类型为 vue-multiselect 动态设置标签

Question

我有一个要求，其中autocomplete来自后端，并且根据我想显示标签的信息，它会有一个名为filedId的键

如果我们点击动态资源 1 btn 标签应该是city

如果我们点击动态资源 2 btn 标签应该是pinCode

如果我们点击动态资源 3 btn 标签应该是countryCode

注意：我不想改变data structure / json

这是我尝试过的

 var app = new Vue({ el: '#app', components: { Multiselect: window.VueMultiselect.default }, data () { return { value: [], options: [], infoData:{}, } }, methods:{ dr1(){ let infoObj = { resource:{ autocomplete:{ fieldId:'city', }, data:[{ id:1, city:'Bengaluru' }], } } this.infoData = infoObj; this.options = infoObj.resource.data; }, dr2(){ let infoObj = { resource:{ autocomplete:{ fieldId:'pinCode', }, data:[{ id:1, pinCode:'560097' }], } } this.infoData = infoObj; this.options = infoObj.resource.data; }, dr3(){ let infoObj = { resource:{ autocomplete:{ fieldId:'countryCode', }, data:[{ id:1, countryCode:'+91' }], } } this.infoData = infoObj; this.options = infoObj.resource.data; }, determineLabel(){ let labelName = this.infoData.resource.autocomplete.fieldId; return labelName; } }, })

 body { font-family: 'Arial' }

 <!DOCTYPE HTML> <html> <head> <title>Timeline</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> </head> <body> <div id="app"> <button @click="dr1()">dynamic resource 1</button> <button @click="dr2()">dynamic resource 2</button> <button @click="dr3()">dynamic resource 3</button> <br/><br/> <div> <multiselect v-model="value" label="determineLabel" :options="options" :multiple="false" :taggable="false" ></multiselect> </div> </div> </body>

我仍然没有找到解决方案，请帮助我提前谢谢

Answer 1

<multiselect>中的 Label <multiselect>不会自行执行determineLabel标签。 它只获取计算或数据选项或一个简单的字符串。 所以你应该把determineLabel标签放在计算中：

...

computed: {
 determineLabel() {
  let labelName = this.infoData.resource.autocomplete.fieldId;
  return labelName;
 }
}

...

如何根据资源类型为 vue-multiselect 动态设置标签

问题描述

1 个解决方案

解决方案1
0 2021-07-26 07:01:04

如何根据资源类型为 vue-multiselect 动态设置标签

问题描述

1 个解决方案

解决方案1 0 2021-07-26 07:01:04

解决方案1
0 2021-07-26 07:01:04