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 语句不填充数据。乍一看，有人对为什么有任何想法吗？

Answer 1

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

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

原因

问题是v-for具有更高的优先级，因此首先被处理，并且 v-if第二处理。这意味着，不仅 v-if 对每个项目都执行，而且更重要的是在这个问题的上下文中，它无法访问 v-else外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，它会变得有点棘手，但您可以将该逻辑放入计算中。