Использование директив Vue. js в шаблоне компонента - PullRequest
0 голосов
/ 02 августа 2020

Я новичок в Vue. js и пытаюсь создать компонент, который подключается к одному объекту в некоторых данных глобальной области и отображается по-разному в зависимости от специфики каждого объекта. Думаю, я неправильно понимаю, как директивы v-if и v-on работают в шаблонах компонентов. (Прошу прощения, если это действительно должны быть два разных вопроса, но я предполагаю, что root моего недоразумения одинаково для обоих вопросов).

Ниже приведен минимальный рабочий пример. Моя цель состоит в том, чтобы каждая запись member отображала только кнопку Disable, если ассоциированный член active, и позволял изменять их статус с помощью кнопки. (Я также хочу сохранить данные members в глобальном масштабе, поскольку в самом инструменте будут дополнительные logi c, происходящие вне самого приложения).

<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 Ответ

2 голосов
/ 02 августа 2020

Код v-if и v-on для кнопки просто имеют неправильный синтаксис. Строка должна выглядеть так:

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