清除屬性時 vue 子組件未顯示更改（使用無構建 vue.js 3）

Question

我正在嘗試學習 vue.js 3.0 版並正在嘗試使用子組件。 我正在使用無構建 vue。

我加載一個數組並將其傳遞給子組件，然后清除子組件中的數組，但長度變化從未反映在 html 中。 我期待它 go 回到零長度。

任何幫助將不勝感激。

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

Answer 1

您需要向父組件emit事件以刪除userBoundaries列表，因為name列表是從中驅動的。

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

Answer 2

從子組件添加發射以清除父綁定數據：

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

清除屬性時 vue 子組件未顯示更改（使用無構建 vue.js 3）

問題描述

2 個解決方案

解決方案1
0 2022-08-30 21:04:21

解決方案2
0 2022-08-30 21:05:30

清除屬性時 vue 子組件未顯示更改（使用無構建 vue.js 3）

問題描述

2 個解決方案

解決方案1 0 2022-08-30 21:04:21

解決方案2 0 2022-08-30 21:05:30

解決方案1
0 2022-08-30 21:04:21

解決方案2
0 2022-08-30 21:05:30