Vue.js 创建选择器,显示来自选定数据集的数据

Posted

技术标签:

【中文标题】Vue.js 创建选择器,显示来自选定数据集的数据【英文标题】:Vue.js create selector that shows Data from selected Dataset 【发布时间】:2020-03-26 07:46:07 【问题描述】:

大家好,我尝试创建一个选择输入字段,在其中使用我创建的数据集的标签填充选项,如下所示:

visitsList: [
                    
                    label: '2017',
                    values: [
                         id: 1, title: "January", value: 20000 ,
                         id: 2, title: "February", value: 30000 ,
                        id: 3,title: "March", value: 40000,
                         id: 4, title: "April", value: 40000,
                        id: 5,title: "May",value: 50000,
                         id: 6,title: "June",value: 60000,
                        id: 7, title: "July",value: 20000,
                         id: 8,title: "August", value: 70000,
                         id: 9,title: "September",value: 70000,
                        id: 10, title: "October",value: 80000,
                        id: 11,title: "November",value: 90000,
                        id: 12,title: "December",value: 100000
                    ],
                    
                    label: '2018',
                    values: [
                         id: 1, title: "January", value: 20000 ,
                         id: 2, title: "February", value: 30000 ,
                        id: 3,title: "March", value: 40000,
                         id: 4, title: "April", value: 40000,
                        id: 5,title: "May",value: 50000,
                         id: 6,title: "June",value: 60000,
                        id: 7, title: "July",value: 20000,
                         id: 8,title: "August", value: 70000,
                         id: 9,title: "September",value: 70000,
                        id: 10, title: "October",value: 80000,
                        id: 11,title: "November",value: 90000,
                        id: 12,title: "December",value: 100000
                    ],
                    
                    label: '2019',
                    values: [
                         id: 1, title: "January", value: 20000 ,
                         id: 2, title: "February", value: 30000 ,
                        id: 3,title: "March", value: 40000,
                         id: 4, title: "April", value: 40000,
                        id: 5,title: "May",value: 50000,
                         id: 6,title: "June",value: 60000,
                        id: 7, title: "July",value: 20000,
                         id: 8,title: "August", value: 70000,
                         id: 9,title: "September",value: 70000,
                        id: 10, title: "October",value: 80000,
                        id: 11,title: "November",value: 90000,
                        id: 12,title: "December",value: 100000
                    ]
                       
              ],
              selectedYear: [],

目标是如果我选择一个选项,它应该显示值。 模板是这样的

 <select v-model="widget.selectedYear">
                    <option v-for="year in widget.visitsList" v-bind:key="year.values">
                        year.label
                    </option>
                </select>
                <!--v-select :option="widget.visitsList.label" ></v-select-->
              <table class="table table-bordered table-striped mb-0">
                <thead>
                  <tr>
                    <th scope="col">Month</th>
                    <th scope="col">Views</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="year in widget.visitsList" v-bind:key="year.label" ><!--v-if="year.label == selectedYear"-->
                        <th scope="row">visit.title</th>
                        <td>visit.value</td>
                    </div>
                  </tr>
                </tbody>
              </table>

我尝试了很多东西,但不知何故我没有找到正确的解决方案。也许没有解决办法。 谢谢您的帮助 问候马克西姆

【问题讨论】:

【参考方案1】:

我认为您应该为此使用计算属性,将您的第一个选择器绑定到数据属性,然后您可以让计算属性监视该数据属性并根据数据属性的更改返回第二个选择的值。

【讨论】:

感谢您的帮助。我试过了,但没有按预期工作。最后我不得不重新排列数据模型以获得更好的可访问性。它奏效了。谢谢你的灵感。

以上是关于Vue.js 创建选择器,显示来自选定数据集的数据的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 转换从列表中更改选定元素

选择器在数据更改时删除选定的段

Vue.js - 选择/下拉选定项 vm 绑定不起作用(bootstrap-vue)

在 vue.js 客户端合并来自不同 graphql 解析器的数据以进行简单输出

通过日期选择器日历从选定日期获取数据

Vue.js学习笔记