Я новичок в 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>
Спасибо за вашу помощь !