The issue at hand:
Let's examine the problematic line in question:
bar.setAttribute("mouseover", this.showBlock(500, false));
Key problems identified include:
- It attempts to set the return value of
this.showBlock(500, false) as the value for the mouseover attribute. Since the function does not return anything, this likely results in a value of undefined.
- The use of the
mouseover attribute is incorrect in HTML and Vue, where v-on:mouseover or @mouseover are typically used.
- Vue looks for these attributes/directives during initialization, but here the elements are added after Vue initialization.
Potential resolutions:
A) Ensure your Vue model can be accessed globally (e.g., as window.app). Then, use the following approach with the onmouseover HTML attribute and stringifying the function call:
bar.setAttribute("onmouseover", "app.showBlock(500, false)");
B) Replace the attribute with an event listener. Here's an example:
bar.addEventListener("mouseover", function () { app.showBlock(500, false); });
Your Vue instance must be accessible for this method as well.
For a detailed solution, refer to @saiyan's answer.
C) Since the task doesn't require any functionality beyond what Vue offers, consider using Vue to create and manipulate your elements. Utilizing Vue for this purpose aligns with its main objective of simplifying element management. Given the for loop you mentioned, a Vue implementation in your HTML might look like this:
<div class="bar">
<div v-for="i in items" :class="i.colour" :style="{ width: i.weight + '%' }" @mouseover="showBlock(500, false)"></div>
</div>
Check out @Bert's fiddle for a comprehensive solution.