分享
三行代码  ›  专栏  ›  技术社区  ›  David M.

使用Vue.js版组件模板中的指令

  •  0
  • David M.  · 技术社区  · 1 周前

    我是新手Vue.js版并尝试创建一个组件,该组件连接到某个全局范围数据中的一个对象,并根据每个对象的具体情况显示不同的内容。我想我误解了指令 v-if v-on

    下面是一个最小的工作示例。我的目标是 member 条目仅显示 Disable 按钮,如果关联成员是 active ,并可以通过按钮更改其状态。(我也希望 members 全局范围内的数据,因为在实际的工具中,应用程序本身之外会有额外的逻辑发生)。

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

    谢谢你的帮助!

    1 回复  |  直到 1 周前
        1
  •  2
  •   crosen9999    1 周前

    代码 v-if 以及 v-on 因为按钮的语法错误。线条应该是这样的:

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