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

Array directly inside array does not get watched #3883

Closed
amcsi opened this issue Oct 9, 2016 · 7 comments
Closed

Array directly inside array does not get watched #3883

amcsi opened this issue Oct 9, 2016 · 7 comments
Labels

Comments

@amcsi
Copy link

amcsi commented Oct 9, 2016

Vue.js version

2.0.1

Reproduction Link

http://jsfiddle.net/amcsi/o9v0ayrw/7/

Steps to reproduce

  1. Press Create Text
  2. Press the + button

What is Expected?

The text should have appeared right when pressing Create Text; instead you had to press +

What is actually happening?

On first instantiation of the VueJS app, if you observer the initial data, you'll see that the inner array doesn't have any watchers assigned to it; there is the inner loop in the template that iterates that array, so I'd expect a watcher be created for that.

Interestingly if any other vue method is triggered that is being watched by vue, the view appears to refresh and the texts that have been added to the inner array now appear apparently.

Here is a longer example of a commit where I fixed the issue in my real world case:
amcsi/skill-builder@9fd3e7e

I was using an empty array directly within an array, and that empty array didn't have any watchers automatically set even though I was iterating it in the template. By changing the inner array to instead be an object with a property with that empty array, I was able to get watchers to watch the empty array.

I think this is bug; you shouldn't have to wrap your arrays in objects if you don't want to I think.

EDIT: updated description according to JSFiddle reproduction

@posva
Copy link
Member

posva commented Oct 9, 2016

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or JSBin containing a set of reproducible steps that can lead to the behaviour you described.

@amcsi
Copy link
Author

amcsi commented Oct 9, 2016

@posva

Alright, while trying to reproduce it, it turned out that whether the initial array was empty or not didn't matter. However the issue of no watching is still there.

Here's a fiddle: http://jsfiddle.net/amcsi/o9v0ayrw/7/

Steps to reproduce:

  1. Press Create Text
  2. Press the + button

Actual:
See that after pressing the + button the new text appears

Expected: The text should have appeared right when pressing Create Text

@amcsi amcsi changed the title Template-iterated empty array directly inside array does not get watched Array directly inside array does not get watched Oct 9, 2016
@posva
Copy link
Member

posva commented Oct 9, 2016

This is working as intended. You'll find a better explanation here 😄

@posva posva closed this as completed Oct 9, 2016
@amcsi
Copy link
Author

amcsi commented Oct 9, 2016

@posva I did read that in the docs, but if you see my example, you'll see that I am using .push() whose changes vue is supposed to detect.

Also, that doesn't explain how it works that changing my inner array into an object contain an array and doing the same push, but instead of doing this.table[0][0].push('abcdef'), doing this.table[0].arr[0].push('abcdef'), also by using .push()

But I can include an example of that too

@posva
Copy link
Member

posva commented Oct 9, 2016

It's because you directly access an element in the array arr[0]

@yyx990803
Copy link
Member

Seems it indeed should be working but is not.

@posva
Copy link
Member

posva commented Oct 9, 2016

My bad, sorry @amcsi

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants