Jestem nowy w Vue.js i próbuje utworzyć komponent, który łączy się z jednym obiektem w niektórych danych globalizacji i wyświetla inaczej w oparciu o specyfikę każdego obiektu. Myślę, że nieporozumienie, jak działa dyrektywy v-if i v-on w ramach szablonów komponentów. (Przepraszamy, jeśli powinno to być dwa różne pytania, ale domyślam się, że korzeń mojego nieporozumienia jest taka sama dla obu problemów).

Poniżej znajduje się minimalny przykład roboczy. Moim celem jest posiadanie każdego wpisu member Wyświetla przycisk Disable Jeśli powiązany członek jest active i włączyć zmianę ich statusu za pomocą przycisku. (Chcę też zachować dane members w globalnym zakresie, ponieważ w rzeczywistym narzędzia pojawi się dodatkowa logika na zewnątrz samej aplikacji).

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <member-display 
            v-for="member in members"
            v-bind:member="member"
            ></member-display>
        </div>
        
     <script>
         var members = [
             {name: "Alex", status: "On"},
             {name: "Bo", status: "On"},
             {name: "Charley", status: "Off"}
         ]

        Vue.component('member-display', {
            props: ['member'],
            computed: {
                active: function() { 
                    // Placeholder for something more complicated
                    return this.member.status == "On";}
            },
            methods: {
                changeStatus: function() {
                    this.member.status = 'Off';
                }
            },
           // WHERE MY BEST-GUESS FOR THE ISSUE IS: 
            template: `
                <div>
                {{member.name}} ({{member.status}})
                <button v-if:active v-on:changeStatus>Disable</button>
                </div>
            `
        });

        var app = new Vue({
            el: "#app",
            data: {
                members: members
            }
        })

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

Dzięki za pomoc!

0
David M. 2 sierpień 2020, 00:41

1 odpowiedź

Najlepsza odpowiedź

Kod v-if i v-on dla przycisku po prostu mają niewłaściwą składnię. Linia powinna wyglądać tak:

<button v-if="active" v-on:click=changeStatus>Disable</button>
2
crosen9999 1 sierpień 2020, 22:17