Skip to content

Instantly share code, notes, and snippets.

@esparkman

esparkman/error

Last active September 9, 2018 01:15
Show Gist options
  • Save esparkman/be543f09f3fbb24a2d12e84ebf31ce54 to your computer and use it in GitHub Desktop.
Save esparkman/be543f09f3fbb24a2d12e84ebf31ce54 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
error
vue.runtime.esm.js?2b0e:587 [Vue warn]: Property or method "policy_holder" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <PolicyHolder> at src/components/PolicyHolder.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:587
warnNonPresent @ vue.runtime.esm.js?2b0e:1872
get @ vue.runtime.esm.js?2b0e:1914
render @ PolicyHolder.vue?683d:38
Vue._render @ vue.runtime.esm.js?2b0e:4540
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
Watcher @ vue.runtime.esm.js?2b0e:3127
mountComponent @ vue.runtime.esm.js?2b0e:2791
Vue.$mount @ vue.runtime.esm.js?2b0e:7995
init @ vue.runtime.esm.js?2b0e:4133
createComponent @ vue.runtime.esm.js?2b0e:5604
createElm @ vue.runtime.esm.js?2b0e:5551
createChildren @ vue.runtime.esm.js?2b0e:5678
createElm @ vue.runtime.esm.js?2b0e:5580
patch @ vue.runtime.esm.js?2b0e:6087
Vue._update @ vue.runtime.esm.js?2b0e:2656
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
Watcher @ vue.runtime.esm.js?2b0e:3127
mountComponent @ vue.runtime.esm.js?2b0e:2791
Vue.$mount @ vue.runtime.esm.js?2b0e:7995
init @ vue.runtime.esm.js?2b0e:4133
createComponent @ vue.runtime.esm.js?2b0e:5604
createElm @ vue.runtime.esm.js?2b0e:5551
patch @ vue.runtime.esm.js?2b0e:6126
Vue._update @ vue.runtime.esm.js?2b0e:2656
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
Watcher @ vue.runtime.esm.js?2b0e:3127
mountComponent @ vue.runtime.esm.js?2b0e:2791
Vue.$mount @ vue.runtime.esm.js?2b0e:7995
(anonymous) @ main.js?56d7:11
./src/main.js @ app.js:4193
__webpack_require__ @ app.js:725
fn @ app.js:102
0 @ app.js:4206
__webpack_require__ @ app.js:725
(anonymous) @ app.js:792
(anonymous) @ app.js:795
vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in render: "TypeError: Cannot read property 'policies' of undefined"
found in
---> <PolicyHolder> at src/components/PolicyHolder.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:587
logError @ vue.runtime.esm.js?2b0e:1733
globalHandleError @ vue.runtime.esm.js?2b0e:1728
handleError @ vue.runtime.esm.js?2b0e:1717
Vue._render @ vue.runtime.esm.js?2b0e:4542
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
Watcher @ vue.runtime.esm.js?2b0e:3127
mountComponent @ vue.runtime.esm.js?2b0e:2791
Vue.$mount @ vue.runtime.esm.js?2b0e:7995
init @ vue.runtime.esm.js?2b0e:4133
createComponent @ vue.runtime.esm.js?2b0e:5604
createElm @ vue.runtime.esm.js?2b0e:5551
createChildren @ vue.runtime.esm.js?2b0e:5678
createElm @ vue.runtime.esm.js?2b0e:5580
patch @ vue.runtime.esm.js?2b0e:6087
Vue._update @ vue.runtime.esm.js?2b0e:2656
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
Watcher @ vue.runtime.esm.js?2b0e:3127
mountComponent @ vue.runtime.esm.js?2b0e:2791
Vue.$mount @ vue.runtime.esm.js?2b0e:7995
init @ vue.runtime.esm.js?2b0e:4133
createComponent @ vue.runtime.esm.js?2b0e:5604
createElm @ vue.runtime.esm.js?2b0e:5551
patch @ vue.runtime.esm.js?2b0e:6126
Vue._update @ vue.runtime.esm.js?2b0e:2656
updateComponent @ vue.runtime.esm.js?2b0e:2784
get @ vue.runtime.esm.js?2b0e:3138
Watcher @ vue.runtime.esm.js?2b0e:3127
mountComponent @ vue.runtime.esm.js?2b0e:2791
Vue.$mount @ vue.runtime.esm.js?2b0e:7995
(anonymous) @ main.js?56d7:11
./src/main.js @ app.js:4193
__webpack_require__ @ app.js:725
fn @ app.js:102
0 @ app.js:4206
__webpack_require__ @ app.js:725
(anonymous) @ app.js:792
(anonymous) @ app.js:795
vue.runtime.esm.js?2b0e:1737 TypeError: Cannot read property 'policies' of undefined
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"46ed2be8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/PolicyHolder.vue?vue&type=template&id=ba7052a4&scoped=true& (app.js:2875), <anonymous>:41:32)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:4540)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:2784)
at Watcher.get (vue.runtime.esm.js?2b0e:3138)
at new Watcher (vue.runtime.esm.js?2b0e:3127)
at mountComponent (vue.runtime.esm.js?2b0e:2791)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:7995)
at init (vue.runtime.esm.js?2b0e:4133)
at createComponent (vue.runtime.esm.js?2b0e:5604)
at createElm (vue.runtime.esm.js?2b0e:5551)
Raw
toggle-component.vue
<template>
<div>
<div class='row' v-for="policy_holder in policy_holders" :key="policy_holder.id">
<div class='col-md-6'>
<h3>
{{ policy_holder.name }}
<small>(Employee ID:<b>{{ policy_holder.employee_id }}</b>)</small>
</h3>
</div>
<div class='col-md-6'>
<div class='pull-right'>
<button class='btn btn-primary margin-top' @click="isCollapsed = !isCollapsed">
Toggle
</button>
</div>
</div>
</div>
<div :class="[isCollapsed ? 'collapsed' : '']" v-for="policy in policy_holder.policies" :key="policy.id">
<div class='row'>
<div class='col-md-12'>
<hr>
<div class='row'>
<div class='col-md-8'>
<div class='panel panel-default'>
<div class='panel-body'>
<div class='row'>
<div class='col-md-6'>
<b>Policy Type: {{ policy.type }}</b>
</div>
<div class='col-md-6'>
<b>Coverage Tier: {{ policy.coverage_tier }} </b>
<br>
<b>Premium Per Pay Period: {{ policy.premium_amount }}</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "PolicyHolder",
props: {
msg: String
},
data() {
return {
isCollapsed: true,
policy_holders: [
{
name: 'Harley Quinn',
employee_id: 1234,
policies: [
{
id: 1,
type: 'Universal Life',
coverage_tier: 'FA',
premium_amount: '76.14'
},
{
id: 2,
type: 'Critical Illness',
coverage_tier: 'ES',
premium_amount: '18.0'
}
]
},
{
name: 'Sassy Shea',
employee_id: 1234,
policies: [
{
id: 1,
type: 'Universal Life',
coverage_tier: 'FA',
premium_amount: '76.14'
},
{
id: 2,
type: 'Critical Illness',
coverage_tier: 'ES',
premium_amount: '18.0'
}
]
}
]
};
},
methods: {
togglePolicy: function() {
if (this.isCollapsed) {
this.isCollapsed = false;
} else {
this.isCollapsed = true;
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment