CODEWITHSUNDEEP
javascriptvue.jsvue-component
David M.
David M.

Reputation: 186

Using Vue.js directives within component template

I'm new to Vue.js and trying to create a component that connects to one object within some global-scope data and displays differently based on the specifics of each object. I think I'm misunderstanding how the directives v-if and v-on work within component templates. (Apologies if this should actually be two different questions, but my guess is that the root of my misunderstanding is the same for both issues).

Below is a minimal working example. My goal is to have each member entry only display the Disable button if the associated member is active, and enable changing their status via the button. (I also want to keep the members data at the global scope, since in the actual tool there will be additional logic happening outside of the app itself).

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

Thanks for your help!

Upvotes: 0

Views: 68

Answers (1)

crosen9999
crosen9999

Reputation: 823

The code v-if and the v-on for the button just have the wrong syntax. The line should look like this:

<button v-if="active" v-on:click=changeStatus>Disable</button>

Upvotes: 2

Related Questions