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.