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>