Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

checkbox can not be selected if it's in a element with @click listener? #4521

Closed
qbaty opened this issue Dec 20, 2016 · 8 comments
Labels
bug

Comments

@qbaty
Copy link

@qbaty qbaty commented Dec 20, 2016

Vue.js version

2.1.6

Reproduction Link

http://codepen.io/qbaty/pen/NboZoz?editors=1111

Steps to reproduce

my html is div > input[type=checkbox]
when div with v-on:click, I found that the input element can not be selected.

What is Expected?

when click this input checkbox, checkbox should be selected or canceled.
div click event will trigger.

What is actually happening?

I have not read the source code,But I think div capture this click event and should not stop this event immediate, it kinda like use “event.stopImmediatePropagation” stop the event progagation?

@qbaty qbaty changed the title checkbox can not be selected if it's in a node with @click listener? checkbox can not be selected if it's in a element with @click listener? Dec 20, 2016
@Marshane

This comment has been minimized.

Copy link

@Marshane Marshane commented Dec 20, 2016

v-model ?!
@qbaty

This comment has been minimized.

Copy link
Author

@qbaty qbaty commented Dec 20, 2016

@marshare I do not think you understand my problem。

@Yunkou

This comment has been minimized.

Copy link

@Yunkou Yunkou commented Dec 20, 2016

@qbaty @click.self="add"

@LinusBorg LinusBorg added 2.1 bug labels Dec 20, 2016
@LinusBorg

This comment has been minimized.

Copy link
Member

@LinusBorg LinusBorg commented Dec 20, 2016

@qbaty Thanks for rteporting this, looks like a bug indeed!

I took the freedom to correct the Vue version in your OP, as you use 2.1.6, noch 2.0.3

@qbaty

This comment has been minimized.

Copy link
Author

@qbaty qbaty commented Dec 20, 2016

@LinusBorg Okey first I met this bug when I am using vue 2.0.3,and I try to update vue to the lastest version. this bug still exsit, so ... version should be 2.x

@FKobus

This comment has been minimized.

Copy link

@FKobus FKobus commented Jan 12, 2017

Seems fixing this bug created a new bug for :checked="" binding when using in combination with vuex states for maintaining checkbox states.

<template>
	<ul>
		<li v-for="option in visibleOptions" :key="option.value">
			<input
				type="checkbox"
				:name="filter.key"
				:value="option.value"
				:checked="inArray(option.value, filter.active)"
				@change="updateFilter">
		</li>
	</ul>
</template>

In this code example is :checked set to true or false whenever it's in the active filter array.
It seems when this component is updated (via vuex) the :checked stated doesn't get's updated like in 2.1.6. In my application is the state managed almost totally by Vuex.

Vue.js version

2.1.7+

Reproduction Link

http://vroom.automotivated.nl/

Howto reproduce

When selecting several checkboxes (like brands) and use your browser back button to fallback to previous states. (it's managed by the popstate event)

What is expected

The checkbox will go on or off depending on the previous action.

What is actually happening?

Everything get's correctly updated (value wise), except the checkbox isn't honored to update (checked true/false). It keeps in a previous state. When selecting multiple after eachother and navigating back and forward is looks like is off a beat and missing the last changed checkbox.

Code that goes with it:
https://github.com/Automotivated/vroom/blob/master/src/views/elements/filters/Multiple.vue

While reading the docs in Vuex, it seems to be best practise to do it like I did.

When did it work

It worked like a charm in 2.1.6. Seems really that fixing this bug triggered this bug to be created.

@LinusBorg

This comment has been minimized.

Copy link
Member

@LinusBorg LinusBorg commented Jan 12, 2017

@FKobus Please open a new issue instead of adding to the bottom of closed ones. Thanks!

@fengjinlong

This comment has been minimized.

Copy link

@fengjinlong fengjinlong commented Mar 13, 2019

干得漂亮

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.