Question

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

代码如下

ServiceReference1.USForsikringServiceTypeClient client = new ServiceReference1.USForsikringServiceTypeClient();

client.ClientCredentials.ClientCertificate.SetCertificate(StoreLocation.CurrentUser, StoreName.My, X509FindType.FindBySerialNumber, "[serial number removed]");

var res = client.getUSForsikringStatusAendringListeHent(new ServiceReference1.USForsikringStatusAendringListeHent_I
    {
        DatoTidSoegFra = new System.DateTime(2018, 9, 1),
        Kontekst = null,
        revision = "1"
    });

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

时

<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元素并进入v-else（我相信这样做）并填充数据，但是v-for语句不会填充数据。乍一看，有谁对为什么有任何想法？

Answer 1

您需要关闭<option>，忘记>中的v-if选项：

您的代码：

<option
   v-if="wf = 'workflow'"
   v-for="workflow of data.workflows"
   :key="workflow.uuid"
   :value="workflow"  // here where `>` is missing
      {{ workflow.head.name }}
</option>

应该是什么：

<option
   v-if="wf = 'workflow'"
   v-for="workflow of data.workflows"
   :key="workflow.uuid"
   :value="workflow">
     {{ workflow.head.name }}
</option>

Answer 2

这是一个有效的问题，因为目前尚不支持将v-for与v-else混合使用。

在以下位置注明已关闭功能的请求 https://github.com/vuejs/vue/issues/4174

尽管如此，您可以将相反的条件（!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"
     </option>
</select>

，则可以使isWorkflowChain为计算值。如果您有多个语句并希望捕获其他语句，则它会变得有些棘手，但您可以将该逻辑放入计算式中。

Answer 3

Vue 3-重大变化

在Vue 3中，v-if的优先级将高于v-for：

https://v3.vuejs.org/guide/migration/v-if-v-for.html#overview

计算属性

但是，建议避免在同一个元素上同时使用它们，而不是在模板级别进行处理，一种实现此目的的方法是创建一个计算出的属性，该属性可以过滤掉可见元素的列表：< / p>

computed: {
  isWorkflowChain: () => {
    // do filtering
  }
}

模板

<option v-for="workflow in isWorkflowChain">
    {{ workflow.head.name }}
</option>

文档：https://v3.vuejs.org/guide/migration/v-if-v-for.html#introduction

带选择选项的V-IF和V-for循环条件似乎从未输入v-else语句

3 个答案:

Vue 3-重大变化