Vuejs rendering select dropdown based on first choice in first drop down

Question

I have two drop-down menus. Depending on the choice of the first drop-down the choices of the second need to be filtered and displayed. The first dropdown has a RoomID value that is used to filter an array of objects for the second drop-down menu. When I select a Room in the first dropdown the console log shows the correct data for the second dropdown. however, it is not rendering in the Html. I am not sure why this is not working

Html:

            <div id="reports-menu" class="myTextColor1 pl-10">
               <div class="row">
                  <div class="input-field col s12">
                     <select v-model="selectedRoomID">
                       <option disabled selected>Rooms</option>
                       <option v-for="room in rooms" v-bind:value="room.RoomID">{{room.Room}}</option>
                     </select>
                     <label>Room:</label>
                   </div>
                </div>

                <div class="row">
                  <div class="input-field col s12">
                     <select  v-model="selectedTopicID">
                       <option disabled selected>Topics</option>
                       <option v-for="option in selectedRoom" v-bind:value="option.TopicID">{{option.Topic}}</option>
                     </select>
                     <label>Topic:</label>
                   </div>
                </div>
            </div>

JS:

      var data = <%=return_message%>; 
      let arrRooms = _.uniqBy(data, function (e) {
         return e.Room;
      });
      let arrTopics = _.uniqBy(data, function (e) {
         return e.Topic;
      });
      let arrDps = _.uniqBy(data, function (e) {
         return e.DiscussionPoint;
      });

      document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('select');
            var instances = M.FormSelect.init(elems, {});
      });

      var chatReportsMenuComponent = new Vue({
         el: "#reports-menu",
         created: function () {
               document.getElementById("reports-menu").style.display = "block";
               //GET TOPIC INFO - PASS TOPIC PARAM;
               this.initialize();
         },
         data: {
            selectedRoomID: undefined,
            rooms:arrRooms,
            selectedTopicID: undefined,
            topics:arrTopics,
            dps:arrDps
         },
         methods: {
            initialize: function () {
               var self = this;
            }
         },
         computed:{
            selectedRoom: function(){ 
               var filteredTopics = _.filter(arrTopics,{'RoomID': this.selectedRoomID})
               console.log("Filterd Topics: ", filteredTopics)
               return filteredTopics
            }
         }
      })

Answer 1

I've simplified your code for the sake of ease, but see the below example on how to achieve this (if i've understood your question correctly):

 new Vue({ el: "#app", data() { return { selectedRoom: null, rooms: [ {name: 'room 1', topicId: 1}, {name: 'room 2', topicId: 2}, {name: 'room 3', topicId: 3} ], topics: [ {id: 1, name: 'topic 1', options: ['one', 'two', 'three']}, {id: 2, name: 'topic 2', options: ['four', 'five', 'six']}, {id: 3, name: 'topic 3', options: ['seven', 'eight', 'nine']} ], selectedTopicOption: null, } }, computed:{ selectedRoomTopic() { const selected = this.selectedRoom return (selected) ? this.topics.find(x => x.id === selected.topicId) : null } } })

 <div id="app"> <label>Select a room</label> <select v-model="selectedRoom"> <option disabled selected>Rooms</option> <option v-for="room in rooms" :value="room"> {{ room.name }} </option> </select> <div v-if="selectedRoomTopic"> <label>Select a Topic</label> <select v-model="selectedTopicOption"> <option disabled selected>Topics</option> <option v-for="option in selectedRoomTopic.options" :value="option"> {{option}} </option> </select> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>