vue.js - 带有选择选项的 V-IF 和 V-for 循环条件似乎永远不会进入 v-else 语句

Question

所以我想知道为什么这个 v-if 和 v-else 语句不起作用，为什么我要以不同的方式解决它。

代码如下

<select v-else v-model="experiment.workflow" required>
    <option selected :value="null">Required: Select a Workflow {{ isChain ? 'Chain' : '' }}</option>
    <option
     v-if="isWorkflowChain"
     v-for="workflow of data.workflows"
     :key="workflow.uuid"
     :value="workflow"
         {{ workflow.head.name }}>
    </option>
    <option
     v-else
     v-for="workflow of data.workflowChains"
     :key="workflow.uuid"
     :value="workflow"
     </option>

所以我得到了这段代码，看起来在 v-if 语句中加载数据时很好，并且值显示在下拉菜单中。当我将值设置为

export default {
    props: {
         isWorkflowChain: {
             type: Boolean
             value: false
             }
        }
    }

应该发生的是它应该跳过 v-if 元素并进入 v-else （我相信它确实如此）并填充数据，但 v-for 语句不填充数据。乍一看，有人对为什么有任何想法吗？

标签： vue.jsvue-component

Answer 1

这是一个有效的问题，因为目前不支持 v-for与 with的混合并不明显。v-else

请注意https://github.com/vuejs/vue/issues/4174处的已关闭功能请求

原因

问题是v-for优先级较高，因此先处理，再v-if处理。v-else这意味着，不仅对每个项目执行 v-if，而且更重要的是，在这个问题的上下文中，它不能访问v-for.

在此处阅读更多信息：https ://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential

解决方案

正确的方法是隔离两个块，并将其v-if放在更高级别的非渲染<template>组件上。

<option>
  <template v-if="isWorkflowChain">
    <option v-for/>
  </template>
  <template v-else>
    <option v-for/>
  </template>
</option>

更快的方法是使用相反的条件 ( !isWorkflowChain) 和v-for这样的。

<select v-else v-model="experiment.workflow" required>
     <option selected :value="null">Required: Select a Workflow {{ isChain ? 'Chain' : '' }}</option>
     <option
         v-if="isWorkflowChain"
         v-for="workflow of data.workflows"
         :key="workflow.uuid"
         :value="workflow"
     >{{ workflow.head.name }}</option>
     <option
         v-if="!isWorkflowChain"
         v-for="workflow of data.workflowChains"
         :key="workflow.uuid"
         :value="workflow"
     >{{ workflow.head.name }}</option>
</select>

你可以进行isWorkflowChain计算。如果您有多个语句并且想要捕获 else，它会变得有点棘手，但您可以将该逻辑放入计算中。