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.

Sign up for GitHub

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

Jump to bottom

Circular object values crash <select> update #5055

Closed
Tamschi opened this issue Mar 1, 2017 · 2 comments
Closed

Circular object values crash <select> update #5055

Tamschi opened this issue Mar 1, 2017 · 2 comments

Comments

@Tamschi
Copy link

Tamschi commented Mar 1, 2017

Vue.js version

2.2.1

Reproduction Link

https://jsfiddle.net/Tamschi/6q4Ljk0j/

Steps to reproduce

Create a vue-backed <select> element that satisfies the following conditions:

  • The selected value is an object.
  • At least one <option> has an object value.
  • At least one of these instances leads to a circular reference and does not appear only after a value that loosely equals the selected value in the option list.

What is Expected?

The Vue.js app should select the right option and avoid a crash.

What is actually happening?

The app crashes with

Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at looseEqual (vue@2.2.1:225)
    at setSelected (vue@2.2.1:6674)
    at cb (vue@2.2.1:6616)
    at inserted (vue@2.2.1:6618)
    at callHook$1 (vue@2.2.1:5102)
    at callInsert (vue@2.2.1:5045)
    at wrappedHook (vue@2.2.1:1690)
    at Object.invoker [as insert] (vue@2.2.1:1637)
    at invokeInsertHook (vue@2.2.1:4828)

looseEqual	@	vue@2.2.1:225
setSelected	@	vue@2.2.1:6674
cb	@	vue@2.2.1:6616
inserted	@	vue@2.2.1:6618
callHook$1	@	vue@2.2.1:5102
callInsert	@	vue@2.2.1:5045
wrappedHook	@	vue@2.2.1:1690
invoker	@	vue@2.2.1:1637
invokeInsertHook	@	vue@2.2.1:4828
patch	@	vue@2.2.1:4992
Vue._update	@	vue@2.2.1:1994
updateComponent	@	vue@2.2.1:2104
get	@	vue@2.2.1:2417
Watcher	@	vue@2.2.1:2400
mountComponent	@	vue@2.2.1:2114
Vue$3.$mount	@	vue@2.2.1:7153
Vue$3.$mount	@	vue@2.2.1:9154
Vue._init	@	vue@2.2.1:3652
Vue$3	@	vue@2.2.1:3733
window.onload	@	(index):48

in Chrome and

TypeError: cyclic object value 1 vue:225:12
	looseEqual https://unpkg.com/vue:225:12
	setSelected https://unpkg.com/vue:6674:11
	inserted/cb https://unpkg.com/vue:6616:9
	inserted https://unpkg.com/vue:6618:7
	callHook$1 https://unpkg.com/vue:5102:5
	_update/callInsert https://unpkg.com/vue:5045:9
	wrappedHook https://unpkg.com/vue:1690:5
	invoker https://unpkg.com/vue:1637:9
	invokeInsertHook https://unpkg.com/vue:4828:9
	patch https://unpkg.com/vue:4992:5
	lifecycleMixin/Vue.prototype._update https://unpkg.com/vue:1994:16
	mountComponent/updateComponent https://unpkg.com/vue:2104:7
	get https://unpkg.com/vue:2417:13
	Watcher https://unpkg.com/vue:2400:7
	mountComponent https://unpkg.com/vue:2114:17
	Vue$3.prototype.$mount https://unpkg.com/vue:7153:10
	Vue$3.prototype.$mount https://unpkg.com/vue:9154:10
	initMixin/Vue.prototype._init https://unpkg.com/vue:3652:7
	Vue$3 https://unpkg.com/vue:3733:3
	window.onload https://fiddle.jshell.net/Tamschi/6q4Ljk0j/show/:48:1

in Firefox. (I thought I'd include both traces since they contain slightly different information.)
@posva
Copy link
Member

posva commented Mar 2, 2017 •
edited

Why do you need a circular reference as the value of an option?

@Tamschi
Copy link
Author

Tamschi commented Mar 3, 2017

@posva The data in question models a game world with interdependent entities. It's easiest to make those relations configurable by binding them directly to option values.
@yyx990803 Thanks for the fast resolution!

At least for now, I'm still going with a custom <strict-select> component since my entities can appear the same to JSON.stringify without being functionally identical. I'm very new to web development though, so I'm not sure how correct my current implementation is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@posva @Tamschi