[英]Vue Component Conditional Creation
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.如果 object 变量store.plan
不为空,我想有条件地创建一个动作列表(每个动作都是一个组件),我已经尝试过v-if
它适用于渲染但不适用于创建组件。
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>
Did you try with optional chaining
:您是否尝试过optional chaining
:
parse() {
return store?.plan?.length > 0 ? true : false
}
and don't mix v-if and v-for.不要混用 v-if 和 v-for。 Try to create wrapper div with v-if around your component:尝试在您的组件周围使用 v-if 创建包装器 div:
<ul id="planOl">
<div v-if="parse">
<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"
/>
</div>
</ul>
It is recommended not to use v-if
and v-for
directives together on the same element due to the syntax ambiguity.由于语法歧义,建议不要在同一元素上同时使用v-if
和v-for
指令。
As per your code, Computed property parse
is used to check the length of an array.根据您的代码,计算属性parse
用于检查数组的长度。 You can move the v-if to a container
element (eg ul
).您可以将 v-if 移动到container
元素(例如ul
)。
In template :在模板中:
<ul id="planOl" v-if="parse">
<Action v-for="action in store.plan">...</Action>
</ul>
Script :脚本:
computed: {
parse() {
return store.plan.length > 0 ? true : false;
}
}
store.plan
to a computed property to use inside the template and parse
property.为了简化这个过程,我们可以将store.plan
移动到计算属性以在模板和parse
属性中使用。store.plan.length
from the computed property will do the job too instead of returning true and false based on condition.简单地从计算属性返回store.plan.length
也可以完成这项工作,而不是根据条件返回 true 和 false。v-if
just outside the Action
component, you can use template
to do this.如果你想在Action
组件之外使用v-if
,你可以使用template
来实现。 No need for an extra element.不需要额外的元素。So, below changes can help fixing the issues-因此,以下更改可以帮助解决问题 -
<template>
<div class="planlist">
<ul id="planOl">
<template v-if="parse">
<Action
v-for="action in plan"
:key="action.act_id"
: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"
/>
</template>
</ul>
</div>
</template>
<script>
import Action from "../components/Action.vue";
import { store } from "../js/store.js";
export default {
name: "Plan",
components: {
Action,
},
computed: {
// A computed property to access the plan ()
plan() {
return store.plan;
},
parse() {
/**
* 1. The plan should be available (not null or empty or undefined)
* 2. The plan should be an array so length property can be applied
* 3. If its an array then it should have data (length in other words)
*/
return this.plan && Array.isArray(this.plan) && this.plan.length;
},
},
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.