Challenge: Build a Markdown Previewer with Vue

I try to pass the test to my project (I’m running it with Vue) but I get the following error:
#preview’s only children should be those rendered by marked.js”.

My codepen:
https://codepen.io/foxkito/pen/NWpKmwe

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36 OPR/75.0.3969.243.

Challenge: Build a Markdown Previewer

Link to the challenge:

Welcome to the forums @javi.mccloud.

I can’t pinpoint the problem because I haven’t worked with vue (I use react), but when I test things by deleting your original code in the editor input and re-run the tests, then test #3 fails with a similar error message to test #4 about the previewer not updating as the editor updates. This makes me think that there is something not quite right with getting vue to re-render the changes or that it is not rendering as fast as the test wants it to render. The problem is that it updates fine if you edit manually. If you add some logging before your render

      console.log(this.texto);
      console.log(marked(this.texto,{ renderer: renderer }));
        document.getElementById('preview').innerHTML = marked(this.texto,{ renderer: renderer });   

and run the tests, you’ll see that the strings don’t seem to change. They will change if you type manually. My guess is to check that you have told vue how to update correctly.

Good luck.

Hi @javi.mccloud !

Welcome to the forum!

I don’t think vue is supported by the FCC tests.

In the instructions for this project, it says this:

Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project.

So that might be the issue.

Thank you very much. I will review what you say, it has helped me to know where my fault may come from.

Well, looks like the updating is the problem, but it’s not your fault. I ported my react previewer to vue 3 in several different variations and got the same result as you. I am getting this error for test 3 (and yours for test 4, and others…):

#preview is not being updated as I type into #editor (should update on every keyup) : expected 'H' to equal 'a'

This test is setting the editor to blank, and then inputting an a and testing the result of innerText() on the preview element. Since the test is not updating the DOM with an event that vue is watching, the editor is not updating, so the preview does not change, and the test fails (my first rendered character is an H by default).

If you care to investigate for which change event vue is listening, you could modify the function triggerChange() in the test and probably get both ends working. I did some cursory googling without luck but I believe this answer would be in the vue source code if you care to look.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.