Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

167
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!