Vue.js create selector that shows Data from selected Dataset

Question

Hello Everybody I've tried to create a select input field where i fill the options with a label from a dataset i created, which looks like this:

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: [],

The goal is if I select an option with the year it should show the values. The template looks like this

 <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>

I tried so many things, but somehow i didn't find the right solution. Maybe there is no solution. Thanks for the help Regards Maxim

Answer 1

I think you should use computed properties for this, bind your first selector to a data property then you can have a computed property watch that data property and return the values for the second select based on the changes in the data property.