bounty将在6天后过期。回答此问题可获得+50声望奖励。Bilal希望吸引更多人关注此问题。
如果对象变量store.plan
不为空,我想有条件地创建一个动作列表(每个动作都是一个组件),我已经尝试过v-if
,它在渲染时效果很好,但在创建组件时效果不好。
出现错误:Uncaught (in promise) TypeError: action is undefined
该组件的完整代码可以在here中找到。
你能告诉我如何处理这个问题吗?提前谢谢。
<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>
3条答案
按热度按时间lc8prwob1#
是否尝试使用
optional chaining
:不要混合使用v-if和v-for。尝试在组件周围创建带有v-if的 Package 器div:
qoefvg9y2#
建议不要在同一元素上同时使用
v-if
和v-for
指令,因为这两个指令的语法不明确。根据您的代码,Computed属性
parse
用于检查数组的长度。您可以将v-if移动到container
元素(例如ul
)。在模板中**:**
脚本**:**
ercv8c1e3#
1.为了简化这个过程,我们可以将
store.plan
移到一个计算属性中,以便在模板和parse
属性中使用。1.简单地从computed属性返回
store.plan.length
也可以完成这项工作,而不是基于条件返回true和false。1.如果你想在
Action
组件的外部使用v-if
,你可以使用template
来实现,不需要额外的元素。因此,以下更改有助于解决这些问题-