Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

165
Visualizações
Handling access to DOM elements

I have a problem in my vuejs component where I am apparently looking for a component of the DOM before the DOM is created. I am getting the following error when I change from one page of the same website, and then I come back to the view.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'checked')
    at Selection.eval [as property]

My vuejs template is as following (the important part is the input checkbox):

<template>

    <div class="billabilityPlot" v-if="$store.state.monthlyBillability.items?.length > 0">
      {{ chart($store.state.monthlyBillability.items) }}
    </div> 
    <div class="chart">
        <h3>Billability plot</h3>
        <svg id="chart" width="800" height="400"></svg>

        Choose year: 
        <select id="year"></select>
        
        <input type="checkbox" id="sort">   
        Toggle sort

    </div>
</template>

And the part I try to access the DOM component is a d3js plot function, for better readability I will only put a fragment of it (key part d3.select("#sort").property("checked")):

export default {
    methods: {
      chart(billabilityData) {

            // SOME CODE //

            update(2021, 0)

            function update(year, speed) {
            
                // SOME CODE
                
                data.sort(d3.select("#sort").property("checked")
                    ? (a, b) => b.billability - a.billability
                    : (a, b) => months.indexOf(a.month) - months.indexOf(b.month))

                var bar = svg.selectAll(".bar")
                    .data(data, d => d.month)

                bar.exit().remove();    
                }
            
            var checkbox = d3.select("div.chart").select("#sort")
            .style("margin-left", "45%")
            .on("click", function() {
            update(select.property("value"), 750)
          }) 
    
    }   

I checked some blogs, and the use of refs could be an option. But I am not sure, if it is what I need, and how to apply it in here. Some tips would be appreciated.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda