Блог

Главная - Вопросы по программированию - Vue Js переключает дерево, подобное каскадному выпадающему списку

Vue Js переключает дерево, подобное каскадному выпадающему списку

#javascript #rest #vue.js #axios

#javascript #остальное #vue.js #axios

Вопрос:

У меня проблема с переключением [вот так.][1]

Когда я нажимаю на каждый плюс, api генерирует дочерние данные из родительского. Как каскадный выпадающий список, но я хочу переключать все с помощью кнопки.

Когда я пытаюсь это сделать, мой переключатель просто открывает два уровня, а не влияет на каждый уровень.

Я не знаю, почему это происходит.

Позвольте мне объяснить, как должна работать кнопка переключения:

Когда я нажимаю кнопку развернуть, все первые / родительские элементы отправляют запрос в мой api. Я смотрю «параметр firstdata» внутри запроса компонента, отправляю в api, затем все данные поступают из моего api и заполняют связанные переменные.

Затем у меня есть вторая переменная состояния для запуска дочерних / вспомогательных уровней.

Я устанавливаю для переменной состояния следующего уровня значение true, когда запрос выполнен. Следующий компонент внутри проверяет эту переменную на наличие запросов, но это работает неправильно.

Прошу прощения за плохой английский, надеюсь, я мог бы рассказать о своей проблеме

Спасибо

Коды первого уровня

 watch:{
      toggleAll:{
        handler(toggler){
          console.log("trigger Stations");
          this.getStations().then(resp =>{
            if(toggler==true)
            {
              console.log(toggler);
              this.$store.commit('Vehicle/setToggleAllGroup',true)
            }
          });

        }
      }
    },
    methods: {
      getStatus(status) {
        return parseStatus(status)
      },
      async getStations(){
        if(this.toggled){
          this.toggled = false
          return;
        }
        await this.$store.dispatch('Vehicle/getCounts', {type: 'status', param: this.status._id})
        this.toggled = true
      },
    }  
 <v-row>
      <!--<td > <v-checkbox v-if="level>2"/></td>-->
      <v-col md="2">
        <v-btn style="background-color: darkcyan;"  class="white--text" x-small @click="getStations">
          <v-icon v-if="!toggled">mdi-plus</v-icon>
          <v-icon v-else>mdi-minus</v-icon>
        </v-btn>
        {{ getStatus(status._id) }}
      </v-col>
      <v-col md="1"></v-col>
      <v-col md="1"></v-col>
      <v-col md="1"></v-col>
      <v-col md="1"></v-col>
      <v-col md="1"></v-col>
      <v-col md="1"></v-col>
      <v-col md="1"></v-col>
      <v-col md="1"></v-col>
      <v-col md="1" class="text-success font-weight-bold">{{ status.count }}</v-col>
      <v-col md="1">{{ ((100 * status.count) / totalVehicleAmount).toFixed(2) }}</v-col>
      <v-col md="12" v-if="toggled amp;amp; stations.statuses[status._id].stations.length amp;amp; stations.statuses[status._id].name==status._id  ">
        <all-vehicles-by-status-station-row   :key="station._id.code" v-for="station in stations.statuses[status._id].stations" :station="station" :status="status"/>

      </v-col>
    </v-row>

Station Codes

  watch:{
      ToggleAllGroup:{
        handler(){
          console.log("trigger Group");
          this.getGroup()
        }

      }
    },
    
       async getGroup() {
        if (this.toggled) {
          this.toggled = false
          return;
        }
        await this.$store.dispatch('Vehicle/getCounts', {
          type: 'station',
          param: this.status._id,
          station: this.station._id.code
        })
        this.toggled = true
      },

    }  
 <v-row>
    <v-col md="2" class="pl-10">
      <v-btn style="background-color: darkcyan;" class="white--text"  x-small @click="getGroup">
        <v-icon v-if="!toggled">mdi-plus</v-icon>
        <v-icon v-else>mdi-minus</v-icon>
      </v-btn>
      {{ station._id.code }}
    </v-col>
    <v-col md="1"></v-col>
    <v-col md="1"></v-col>
    <v-col md="1"></v-col>
    <v-col md="1"></v-col>
    <v-col md="1"></v-col>
    <v-col md="1"></v-col>
    <v-col md="1"></v-col>
    <v-col md="1"></v-col>
    <v-col md="1">{{ station.count }}</v-col>
    <v-col md="1">{{ ((100 * station.count) / totalVehicleAmount).toFixed(2) }}</v-col>
    <v-col md="12" v-if="toggled amp;amp; groups.stations[station._id.code].groups.length amp;amp;  groups.stations[station._id.code].name==station._id.code">
      <all-vehicles-by-status-group-row    v-for="group in groups.stations[station._id.code].groups" :key="guid(group._id.group)" :group="group" :status="status" :station="station" />

    </v-col>
  </v-row>

Коды станций

Когда я нажимаю переключить все первые getStations, часы работают правильно, но часы внутри GetGroups не запускаются должным образом.. эта работа только часть

например

X —> Первая основная категория X1 -> Подкатегория X1.2 -> Категория SubtoSub

Y —> Вторая основная категория Y1 —> Подкатегория (работает) ——— эти данные не поступают, потому что наблюдатель не запускает триггер.

Комментарии:

1. Не могли бы вы создать codesandbox , демонстрирующий вашу проблему? Было бы намного проще отлаживать таким образом.

2. к сожалению, я не могу поделиться некоторыми кодами.