Javascript Vuejs渲染基于第一个下拉列表中的第一个选项选择下拉列表

我有两个下拉菜单。根据第一个下拉列表的选择，需要过滤和显示第二个下拉列表的选择。第一个下拉菜单有一个RoomID值，用于为第二个下拉菜单过滤对象数组。当我在第一个下拉列表中选择房间时，控制台日志显示第二个下拉列表的正确数据。但是，它不是在Html中呈现的。我不知道这为什么不起作用

Html:

房间
{{房间，房间}
房间：
话题
{{option.Topic}
主题：

JS:

var数据=；
设arrooms=uqby（数据，函数（e）{
返回e.Room；
});
设arrTopics=uq.uniqBy（数据，函数（e）{
返回e.Topic；
});
设arrDps=u.uniqBy（数据，函数（e）{
返回e.DiscussionPoint；
});
document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'select'）；
var instances=M.FormSelect.init（elems，{}）；
});
var chatreptsmenucomponent=新的Vue({
el:“报告菜单”，
已创建：函数（）{
document.getElementById（“报告菜单”）.style.display=“块”；
//获取主题信息-传递主题参数；
这是初始化（）；
},
数据：{
selectedRoomID:未定义，
房间：房间，
selectedTopicID：未定义，
主题:主题,，
dps:arrDps
},
方法：{
初始化：函数（）{
var self=这个；
}
},
计算：{
selectedRoom:function（）{
var filteredTopics=..filter（arrTopics，{'RoomID'：this.selectedRoomID}）
log（“Filterd主题：”，filteredTopics）
返回过滤器DTOPICS
}
}
})

为了方便起见，我简化了您的代码，但请参见下面的示例，了解如何实现这一点（如果我正确理解了您的问题）：

newvue({
el:“应用程序”，
数据（）{
返回{
selectedRoom:null，
房间：[
{name:'room 1'，主题ID:1}，
{name:'room 2'，主题ID:2}，
{姓名：“3号房间”，主题ID:3}
],
主题：[
{id:1，名称：'topic1'，选项：['one'，'two'，'three']}，
{id:2，名称：'topic2'，选项：['four'，'five'，'six']}，
{id:3，名称：'topic3'，选项：['seven'，'seek'，'nine']}
],
selectedTopicOption:null，
}
},
计算：{
selectedRoomTopic（）{
const selected=this.selectedRoom
返回（选定）
？this.topics.find（x=>x.id==selected.topicId）
：null
}
}
})

选择一个房间
房间
{{room.name}
选择一个主题
话题
{{option}}

很乐意帮忙：-）

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

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