+ 5

[Solved]Make checkbox - binding work

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

23rd Apr 2019, 9:44 PM
Emoji FanBoy
Emoji FanBoy - avatar
14 odpowiedzi
+ 7
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
24th Apr 2019, 2:25 AM
David Carroll
David Carroll - avatar
+ 7
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.
25th Apr 2019, 4:49 PM
David Carroll
David Carroll - avatar
+ 4
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. 👌
24th Apr 2019, 5:45 PM
David Carroll
David Carroll - avatar
+ 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. 👌
25th Apr 2019, 6:22 PM
David Carroll
David Carroll - avatar
+ 4
Emoji FanBoy Nice! I dig the v-show directive used in the challenges template that essentially includes the challenge if it includes the filter.
26th Apr 2019, 12:36 AM
David Carroll
David Carroll - avatar
+ 3
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.
24th Apr 2019, 4:35 PM
Gordon
Gordon - avatar
+ 3
This console occurs when running your "updated" code. https://www.sololearn.com/post/91291/?ref=app
25th Apr 2019, 4:24 PM
Gordon
Gordon - avatar
+ 2
David Carroll It'd be nice to get your help… 🙄
23rd Apr 2019, 10:28 PM
Emoji FanBoy
Emoji FanBoy - avatar
+ 2
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
24th Apr 2019, 2:25 PM
Emoji FanBoy
Emoji FanBoy - avatar
+ 1
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
24th Apr 2019, 8:13 PM
Emoji FanBoy
Emoji FanBoy - avatar
+ 1
Oh! I have :keys instead of :key. 😭😭 Edit: Now I changed key but still not working😌
25th Apr 2019, 4:44 PM
Emoji FanBoy
Emoji FanBoy - avatar
+ 1
David Carroll Actually it's close. Just applying some final touches. It's actually started to react…
25th Apr 2019, 5:19 PM
Emoji FanBoy
Emoji FanBoy - avatar
+ 1
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
25th Apr 2019, 8:33 PM
Emoji FanBoy
Emoji FanBoy - avatar
+ 1
So you should use "methods" property instead of "computed" property?
26th Apr 2019, 12:37 AM
Gordon
Gordon - avatar