Scoped component not updating properties on parent changes #228

verybigelephants · 2024-02-12T14:32:14Z

verybigelephants
Feb 12, 2024

Hello,

could please someone explain what am i doing wrong?

I have a parent component, let's say "Library", iterating over array of children, let's say "Books". However, when i update the children Books array petite vue doesn't catch its changes, only if i delete the array, wait a bit/on next tick, and then re-assign the books again.

But then again, it catches the change when i just .concat() the array

This is the full (non) working example to explain what i mean:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<script src="https://unpkg.com/petite-vue" defer init></script>
</head>
<body>
	<div v-scope="Library({books:books_1})" @vue:mounted="mounted">
		<ul>
			<li 
				v-for="(book, i) in books"
				v-scope="Book({title:book.title})"
			>
				<span v-text="title"></span>
			</li>
		</ul>
		
		<button @click="updateBooks">Update books</button>
		<button @click="updateBooksNextTick">Update books on next tick</button>
		<br /> <br />
		<button @click="thisIsStrange">But it catches the books update when i concat it</button>
	</div>
	
	<script type="text/javascript">
		var books_1 = [
			{title:"test 1"},
			{title:"test 2"},
			{title:"test 3"}
		];
	
		function Library(props){
			return {
				books:props.books,
		
				updateBooks(){
					this.books = this.randBooks();
				},
				updateBooksNextTick(){
					let self = this;
					this.books = [];  
					//this lets petite vue to realize that all the children are gone or something
					this.$nextTick(() => {
						this.books = self.randBooks();
					});
				},
				thisIsStrange(){
					this.books = this.books.concat(this.randBooks() );
				},
				
				randBooks(){
					let collection = [];
					for(var i=0;i<3;i++){
						collection.push({title:(Math.random().toString(36).substr(2, 5))});
					}
					return collection;
				},
				mounted: function(){
					console.log("mounted", this.books);
				}
			}
		}
		function Book(props){
			return {
				title: props.title
			}
		}
		
		document.addEventListener("DOMContentLoaded", function(event) {
			PetiteVue.createApp({
				
			}).mount('body');
		});

	</script>
</body>
</html>

What is going on here? What am i doing wrong?

sqllyw · 2024-02-13T10:07:40Z

sqllyw
Feb 13, 2024

try reactive:

    var books_1 = reactive( [
        {title:"test 1"},
        {title:"test 2"},
        {title:"test 3"}
    ])

0 replies

verybigelephants · 2024-02-13T11:24:27Z

verybigelephants
Feb 13, 2024
Author

@sqllyw that doesn't make any sense, that would only make specific on-the-fly array of items book items reactive, not the actual books_1. And even then, this is just a property that gets passed down to Library.

(anyways i did try to use global = PetiteVue.reactive({ books: books_1}); on a the input and then Library({books:global.books}) in the scope builder and it didn't help this issue of course)

0 replies

sqllyw · 2024-02-14T07:26:33Z

sqllyw
Feb 14, 2024

ok, the issue seems related to the Book component, when you change the book in :

this.books = this.randBooks();

v-scope="Book({title:book.title})" is still referring to the value that you passed from books_1, because props are not responsive, this is very similar to #109, the selected answer in 109 explains why, and also offer a solution, to apply to your example:

<ul>
    <li v-for="(book, i) in books" v-scope="Book({title: () => book.title})">
        <span v-text="title()"></span>
    </li>
</ul>

as for why this works:

    this.books = [];
     //this lets petite vue to realize that all the children are gone or something
     this.$nextTick(() => {
     this.books = self.randBooks();
     });

your comment already explains it.

1 reply

verybigelephants Feb 18, 2024
Author

i will be honest, i am not 100% sure why passing an anonymous functoin like title: () => book.title solves the issue, and using this seems like a bad practice/unexpected component structure in case someone else wanted to re-use the Book component in the future

in the end i ended up removing the "Book" component altogether and i just iterate items from the global books object v-for="(book, i) in books" and then <span v-text="book.title"></span> directly

while this doesn't seem very clean, not having a book component at all, but this seems like a better tradeoff than trying to hack this unexpected behavior in terms of code manageability, becuases this really feels like a petite vue bug

sqllyw · 2024-02-19T00:44:23Z

sqllyw
Feb 19, 2024

in your example, the Book component got passed a primitive value, if you change the books_1[0].title it will not be reflected since primitive data is non reactive by design, you can pass a object, then change the object properties, it is reactive, here is a slight change to your code that illustrate this point, you can still have a good code manageability by passing a book object to the Book component:

<div v-scope="Library({books:books_1})" @vue:mounted="mounted">
		<ul>
			<li 
				v-for="(book, i) in books"
				v-scope="Book({mybook:book})"
			>
				<span v-text="mybook.title"></span>
			</li>
		</ul>

a working sample here:
https://jsfiddle.net/43jkcm8w/

3 replies

verybigelephants Feb 26, 2024
Author

Thank you for the suggestion;

however, the issue is the same, as your example doesn't work because you pass the book as an object, but because you are utilizing the nextTick in the updateBooks method (which would work even if you did Book({title:book.title}) )

sqllyw Feb 27, 2024

nextTick is the documented way to update the dom after some state change:
https://vuejs.org/api/general.html#nexttick

verybigelephants Feb 27, 2024
Author

I know what nextTick is for, i have written regular vue before. And it shall not be called when proprties normally change every time, what would be a a point of a reactive framework like vue then?

Look, i appreciate you trying to help but form the comments it seems that you fully don't understand what's going on and provided irrelevant code that does not touch this issue, so with all due respect, this is not helpful to anyone.

Also, the application behaves as expected when some component is reading dynamic properties/its changes from a global, not sub-scroped child. Plus, from the first example we may see that when the object in the property updates via .concat petite vue does reflect the change, so this clearly seems like a petite vue bug

604587986 · 2024-02-28T06:40:25Z

604587986
Feb 28, 2024

You can add :key="book.title" on for item

1 reply

verybigelephants Aug 2, 2024
Author

that does not do anything regarding the bug

simply - PetiteVue, doesn't reflect reactive variable changes when they are passed down as parameters

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scoped component not updating properties on parent changes #228

{{title}}

Replies: 5 comments 5 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Scoped component not updating properties on parent changes #228

verybigelephants Feb 12, 2024

Replies: 5 comments · 5 replies

sqllyw Feb 13, 2024

verybigelephants Feb 13, 2024 Author

sqllyw Feb 14, 2024

verybigelephants Feb 18, 2024 Author

sqllyw Feb 19, 2024

verybigelephants Feb 26, 2024 Author

sqllyw Feb 27, 2024

verybigelephants Feb 27, 2024 Author

604587986 Feb 28, 2024

verybigelephants Aug 2, 2024 Author

verybigelephants
Feb 12, 2024

Replies: 5 comments 5 replies

sqllyw
Feb 13, 2024

verybigelephants
Feb 13, 2024
Author

sqllyw
Feb 14, 2024

verybigelephants Feb 18, 2024
Author

sqllyw
Feb 19, 2024

verybigelephants Feb 26, 2024
Author

verybigelephants Feb 27, 2024
Author

604587986
Feb 28, 2024

verybigelephants Aug 2, 2024
Author