Question

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

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

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

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>

Vue.js基于第一个下拉列表中的第一个选择呈现选择下拉列表

1 个答案: