I want to create a list of actions (each of which is a component) conditionally if the object variable store.plan
is not empty, I have tried v-if
which works well for rendering but not for creating the component.
I get an error:
Uncaught (in promise) TypeError: action is undefined
The full code of this component can be found here.
Can you please tell me how can I handle this problem? thanks in advance.
<template>
<div class="planlist" v-if="parse">
<ul id="planOl">
<Action
v-for="action in store.plan"
:action_id="action.act_id"
:actor="action.actor"
:color="action.color"
:size="action.size"
:lego_name="action.lego"
:pick_pos="action.pick"
:place_pos="action.place"
:blocked="action.blocked"
:status="action.status"
:key="action.act_id"
/>
</ul>
</div>
</template>
<script>
import Action from '../components/Action.vue';
import { store } from '../js/store.js'
export default {
name: 'Plan',
data() {
return {
store,
}
},
computed: {
parse() {
if (store.plan.length > 0) {
return true;
}
return false;
}
},
components: {Action}
}
</script>
from Vue Component Conditional Creation
No comments:
Post a Comment