在組件模板中使用 Vue.js 指令

Question

我是 Vue.js 的新手，並試圖創建一個組件，該組件連接到一些全局范圍數據中的一個 object，並根據每個 object 的具體情況以不同方式顯示。 我想我誤解了指令v-if和v-on在組件模板中的工作方式。 （如果這實際上應該是兩個不同的問題，我深表歉意，但我的猜測是，我對這兩個問題的誤解的根源是相同的）。

下面是一個最小的工作示例。 我的目標是讓每個member條目僅在關聯成員active狀態時才顯示Disable按鈕，並啟用通過按鈕更改其狀態。 （我還想將members數據保存在全局 scope 中，因為在實際工具中，應用程序本身之外還會發生額外的邏輯）。

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

謝謝你的幫助！

Answer 1

按鈕的代碼v-if和v-on只是語法錯誤。 該行應如下所示：

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

在組件模板中使用 Vue.js 指令

問題描述

1 個解決方案

解決方案1
2 已采納 2020-08-01 22:11:15

在組件模板中使用 Vue.js 指令

問題描述

1 個解決方案

解決方案1 2 已采納 2020-08-01 22:11:15

解決方案1
2 已采納 2020-08-01 22:11:15