Currently, I am diving into learning vue.js version 3.0 and I'm in the process of experimenting with child components without using a build system for Vue.
In my project, I pass an array to the child component and then clear it within that component. However, I've noticed that the length change of the array is not being reflected in the HTML as expected. Ideally, I was anticipating the array length to reset back to zero.
If anyone has any insights or suggestions on how to address this issue, I would greatly appreciate it!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
<input type="button" v-on:click="LoadBoundaryList();" value="Add names" />
<test-component :names=userBoundaries></test-component>
</div>
<script>
const TestComponent = {
props: ['names'],
template: `<div>{{names.length}}</div><input type="button" value="remove" v-on:click="removeAllNames()"/>`,
methods: {
removeAllNames() {
this.names = [];
}
}
}
const RootComponent = {
data() {
return {
searchQuery: null,
userBoundaries: []
}
},
components: {
TestComponent
},
methods: {
LoadBoundaryList () {
for (var i = 0; i < 14; i++) {
this.userBoundaries.push("BoundaryName");
}
},
}
}
var appRoot = Vue.createApp(RootComponent);
appRoot.mount('#app');
</script>
</body>
</html>