[Solved]Make checkbox - binding work

Question

Please focus in difficulty and topic components, I know I've done some unadvisable things in other parts, but probably I know how to fix them, now my focus in reactive binding.

Thanks

Edit: I mean that last array in display should change. Currently it is reactive, but v-model or v-on can't change it with my efforts.

Commented code:
Edit: I deleted those codes, new working codes
Using Sets:
https://code.sololearn.com/Wqn7Gd6KckUJ/?ref=app

Using Arrays:
https://code.sololearn.com/WEV3Hr8tgm3q/?ref=app

Answer 1

Emoji FanBoy I copied your original code to experiment with Vue and the issue you were experiencing.

I only had a few minutes to work on this and figured I'd show you my findings and let you fix the rest.

Please see my comments in the code.

I hope this helps.

DISCLAIMER:
I've never worked with VueJS and have not reviewed the online documentation. This is solely from experimentation based on your existing code. There may be a better way to implement this.

https://code.sololearn.com/WuLce5mF91cB/?ref=app

Answer 2

Before I make some time to work on this today, I wanted to see if anyone has already made progress on this yet.

If not, I might actually do a recorded screencast of me working through the problem and then post on YouTube for people to view if they are interested in how I work on learning new frameworks.

Answer 3

Emoji FanBoy I'm a bit buried with work at the moment. 😉

However, I will take a closer look either later today or tomorrow. I need to review this on a desktop browser with dev tools to see what Vue is doing in memory.

Gordon Thanks for having a look as well. 👌

Answer 4

Emoji FanBoy Cool... I just got the code to work myself. However, I think it's done completely wrong. 🤣

I am about to review the documentation now to understand how Vue handles data mutations. I'll post a version 2 of the same code in a few minutes.

However, I may completely rewrite this from scratch to give me an opportunity to learn VueJS. 👌

Answer 5

Emoji FanBoy Nice! I dig the v-show directive used in the challenges template that essentially includes the challenge if it includes the filter.

Answer 6

I think you are asking about the console error message when we click on the difficulty.

There are two issues with your current version, both related to that your input is of type checkbox.

1. checkbox should listen to change event instead of input event.

For example,
v-on:change="$emit('change', $event.target.checked)"

2. (Quote from reference) "By default, v-model on a component uses value as the prop and input as the event, but some input types such as checkboxes and radio buttons may want to use the value attribute for a different purpose."

2.1 one of the solution is as what you did for topic-filter, define v-on directly instead of using v-model

2.2 a second way is to define model property, in defining the component difficulty-filter.

Reference :

https://vuejs.org/v2/guide/components-custom-events.html

I will try to code a demo for you tomorrow and if I succeed, I will post here if at that time you still need it.

Answer 7

This console occurs when running your "updated" code.

https://www.sololearn.com/post/91291/?ref=app

Answer 8

David Carroll It'd be nice to get your help… 🙄

Answer 9

David Carroll Thanks for your efforts.
I can probably see what you had in mind but you missed some things, mostly because of my lack of commenting. I tried to improve but it didn't come off.😌

Topiculties array was for binding in my script, and topics just static one for iteration.

If you find some time and wish to spend here, this paragraph explains the thing I seek but doesn't work when I apply, so I clearly missing something.🤔
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Again thanks for taking time

Answer 10

Gordon No, I'm asking about changing topiculties array on input(change).
That error was there because I was trying to get things right fast, so I tried different ways in both components, I knew it gave error.

2. "…" I believe I don't have other purpose than passing value, still I'll make new code for that (also with other things improved and *commented*)

2.1 my topic-filter doesn't work and that's the question, 😆😆
2.2 I'm trying to do that.

@david no problems👍
I'll comment the code so you can easily understand my intentions.
edit: now done,
https://code.sololearn.com/Wn6IMna8mCCK/?ref=app

Answer 11

Oh! I have :keys instead of :key. 😭😭

Edit: Now I changed key but still not working😌

Answer 12

David Carroll Actually it's close. Just applying some final touches. It's actually started to react…

Answer 13

https://code.sololearn.com/WEV3Hr8tgm3q/?ref=app

Done.💪
I'm trying with sets, but things doesn't look like Vue is reactive with set operations🤔
Thanks Gordon, @david and @richard for support

Answer 14

So you should use "methods" property instead of "computed" property?