vue child component not showing change when property cleared (using no build vue.js 3)-CodePudding

I am trying to learn vue.js version 3.0 and am experimenting with child components. I am using no-build vue.

I load an array and pass it to the child component and then clear the array in the child component but the length change is never reflected in the html. I was expecting it to go back to a length of zero.

Any help would be greatly appreciated.

<!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>

CodePudding user response：

You need to emit an event to the parent component to remove userBoundaries list, as name list is driven from 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" @remove="remove"></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.$emit('remove')
                }
            }
        }
        const RootComponent = {
            data() {
                return {
                    searchQuery: null,
                    userBoundaries: []
                }
            },

            components: {
              TestComponent
            },
            methods: {
                LoadBoundaryList () {
                    for (var i = 0; i < 14; i  ) {
                        this.userBoundaries.push("BoundaryName");
                    }
               },
               remove() {
                 this.userBoundaries = []
               }
            }
        }
        var appRoot = Vue.createApp(RootComponent);
        appRoot.mount('#app');
    </script>
</body>
</html>

CodePudding user response：

Add emit from the child component to clear the parent bound data :

<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 @clear="clearNames"></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.$emit('clear',[])
        }
      }
    }
    const RootComponent = {
      data() {
        return {
          searchQuery: null,
          userBoundaries: []
        }
      },

      components: {
        TestComponent
      },
      methods: {
        LoadBoundaryList() {
          for (var i = 0; i < 14; i  ) {
            this.userBoundaries.push("BoundaryName");
          }
        },
        clearNames(arr){
          this.userBoundaries=arr
        }
      }
    }
    var appRoot = Vue.createApp(RootComponent);
    appRoot.mount('#app');
  </script>
</body>

</html>