I am trying to create a component with a list of cards but it always throws an error:
Property or method “ac” is not defined on the instance but referenced during render.
I have check code looks like to be valid, but the error come every time. I have googled but unfortunately it did not help. Appreciate any help.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<vutify-main></vutify-main>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script>
Vue.component('vutify-main', {
template: `
<v-app>
<v-main>
<v-btn @click="show">test</v-btn>
<accounts-list
:overlay="accountListOverlay"
:accounts="accountList"
></accounts-list>
</v-main>
</v-app>
`,
data: function() {
return {
accountListOverlay: false,
accountList: [{ "account_id": 1, "account_name": "1", "account_url": "1" }]
};
},
methods: {
show: function() {
return this.accountListOverlay = !this.accountListOverlay;
}
}
});
Vue.component('accounts-list', {
template: `
<v-overlay :value="overlay">
<v-list color="transparent">
<v-card v-for="ac in accounts" :key="ac.account_id" light style="margin-bottom: 10px;>
<div>
<v-card-title class="font-weight-regular">Account Name:</v-card-title>
<v-card-subtitle class="font-weight-light body-1">
{{ ac.account_url }} - {{ ac.account_id }}
</v-card-subtitle>
</div>
<div>
<v-card-title class="font-weight-regular">Description:</v-card-title>
<v-card-subtitle class="font-weight-light body-1">
{{ ac.account_name }}
</v-card-subtitle>
</div>
<v-card-actions>
<v-btn
text color="#7ec3d8"
rounded
text
>Get data
</v-btn>
</v-card-actions>
</v-card>
</v-list>
</v-overlay>
`,
props: {
overlay: {
type: Boolean,
required: true,
default: false
},
accounts: {
type: Array,
required: false,
default: []
}
},
});
new Vue({
el: '#app',
vuetify: new Vuetify()
});
</script>
</body>
</html>