在NUXT应用程序中，控制台超出一定级别的嵌套返回未定义的量。如何达到深嵌套的元素？

Question

在NUXTJS应用程序中，我正在尝试访问Arcgis地图提供的传奇中的DIV。该div嵌套在我的地图元素中。我给了地图元素一个ref 地图为了达到它。

<template>
  <div id="viewDiv" ref="map" class="h-full"></div>
</template>

该控制台日志

console.log(
        'inTheMap?',
        this.$refs.map.children[0].children[2].children[0].children[1]
          .children[0]
      )

将返回DIV，但我想达到的DIV更深。不幸的是，如果我委托log更深一个级别（如果我添加.children [0]），则控制台.log返回undfection。我的问题：我们可以安装多深的嵌套元素有限制吗？如果是，是否有另一种方法可以达到深嵌套元素？

这是地图的代码（一部分）：

<template>
  <div id="viewDiv" ref="map" class="h-full"></div>
</template>

<script>
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import esriConfig from '@arcgis/core/config'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Legend from '@arcgis/core/widgets/Legend'
import Search from '@arcgis/core/widgets/Search'

export default {
  props: {
    selectedTab: {
      type: Number,
      default: 3,
    },
  },

  data() {
    return {
      project:
        'https://...',
      countries:
        'https://...',
      projectLyr: undefined,
      countryLyr: undefined,
      searchWidget: undefined,
      legend: undefined,
      map: undefined,
      view: undefined,
      fieldName: 'composite_risk',
      renderer: {},
      filter: "dev_type = 'road and railway'",
      impactId: 0,
      hasKmField: true,
      buttonDescription: 'Total Environmental Risk',
      legendSymbol: [],
    }
  },

mounted() {
    esriConfig.apiKey =
      'myToken'

    this.map = new Map({ basemap: 'osm-light-gray' })

    this.view = new MapView({
      map: this.map,
      center: [15, 50],
      zoom: 3,
      container: 'viewDiv',
    })

    this.projectLyr = new FeatureLayer({
      url: this.project,
      outFields: ['*'],
      title: 'Legend',
    })

    this.countryLyr = new FeatureLayer({
      url: this.countries,
      outFields: ['*'],
      title: 'Legend',
    })

    this.view.popup = {
      dockOptions: {
        position: 'bottom-left',
      },
    }

    this.legend = new Legend({
      view: this.view
    })
    this.view.ui.add(this.legend, 'top-right')

  this.updateLayer({
      value: 'composite_risk',
      hasKmField: true,
      title: 'Total Environmental Risk',
    })
},

methods: {
 updateLayer(value) {
      if (typeof value === 'number') {
        this.filter =
          value === 1
            ? "dev_type = 'road' OR dev_type = 'railway'"
            : "dev_type = 'road and railway'"
        value = {
          value: 'composite_risk',
          hasKmField: true,
          title: 'Total Environmental Risk',
        }
        this.view.popup.close()
        this.impactId = 0
      }
      if (!value.isFilter) {
        this.fieldName = value.value
        this.hasKmField = value.hasKmField
        this.buttonDescription = value.title
      } else {
        this.filter = `${value.value}`
      }
      this.$nextTick(() => {
        if (this.selectedTab === 0) {
          this.map.remove(this.projectLyr)
          this.map.add(this.countryLyr)
          this.filtering(value)
        } else {
          this.map.remove(this.countryLyr)
          this.map.add(this.projectLyr)
          this.filtering(value)
        }
        this.layer.popupTemplate =
          this.selectedTab === 0
            ? this.popupTemplateCountry
            : this.popupTemplateProject
      })
      console.log(
        'inTheMap?',
     this.$refs.map.children[0].children[2].children[0].children[1]
          .children[0]
      )
    },
}

​

Answer 1

为了达到元素，您可以从传说的容器节点开始。

这是一个逐步的代码样本，以获取欲望元素。为了简化而没有检查。

// first get all service entries of the legend container
const legend_services = legend.container.querySelectorAll(".esri-legend__service");
// this will have the same order as they have in the map
// in this case we want the fist legend service
const desire_legend_service = legend_services[0];
// now you want the legend layer entry in the legend service
const legend_layer = desire_legend_service.querySelector(".esri-legend__layer");
// now in your case you want to hide the first table of the legend layer
const legend_layer_first_table = legend_layer.querySelector(".esri-legend__layer-table");
legend_layer_first_table.classList = "hide";

hide类只是

.hide {
    display: none;
}

为此起作用的一件事是，Legend需要在屏幕上显示。在搜索要隐藏的div元素之前，您需要一个策略来确保此问题。