时间戳

首页 > 解决方案 > 仅当父 div 具有特定属性时，如何在 Vue.js 中使用“v-if”来呈现？

html - 仅当父 div 具有特定属性时，如何在 Vue.js 中使用“v-if”来呈现？

问题描述

我正在尝试做的是使它<span v-if="spinnerToggle && command-id=='updateAllExternalReferences'">Spin</span>仅在spinnerToggle具有值且true 父div 具有command-id.updateAllExternalReferences

我已经能够仅使用spinnerToggle条件来使其工作，但是添加command-id一个会导致它给我以下错误：

[Vue 警告]：属性或方法“id”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

不v-if支持引用父 div 中属性的条件？如果是这样，我应该如何实现这种功能？您将在下面找到父 div 和相应的<span>.

<div class="tool is-activatable"
      v-if="config.isVisibleToUser"
      @click="dispatch"
      :class="[config.cssClass, {'is-active': active, 'is-highlighted': highlight, 'is-button': !context.reordering}]"
      :command-id="config.command"
      :context-menu-name="contextMenu.name"
      :context-menu-details="contextMenu.contextMenuDetails"
      :data-id="config.id"
      :disabled="disabled"
      :data-placement="inMenu ? 'right-top' : config.tooltipPosition || 'bottom'"
      :data-original-title="(config.tooltipKey || config.tooltip || config.toolName) | i18next"
      :data-expanded-content="(config.expandedTooltipKey || config.expandedTooltip) | i18next" data-html="true"
      :data-expand-delay="inMenu ? 0 : config.expandDelay > -1 ? config.expandDelay : 2000"
      :data-trigger="config.tooltipTrigger"
      :tooltip-dynamic-snippet-id="dynamicSnippetId">

  <img v-if="!hasIcon && config.img" :src="config.img" />
  <ToolIcon v-if="hasIcon" :icon="config.icon" :iconUri="config.iconUri" :initials="config.iconInitials"
            :awaitingData="false" :updateAvailable="config.isNewerVersionAvailable"/>
  <span v-if="spinnerToggle && command-id=='updateAllExternalReferences'">Spin</span>

  <span class="tool-label" :class="{'hide-in-toolbar': !shouldShowLabel}">
    {{ (config.toolDisplayName || config.toolName) | i18next }}
  </span>
  <ShortcutKeys v-if="inMenu" :shortcut="shortcut" />
  <div v-if="context.reordering" class="drag-handle"></div>
</div>

标签： htmlvue.js

解决方案

您不能直接从父级引用属性，<div>但可以引用用于填充它的相同数据：

<span v-if="spinnerToggle && config.command === 'updateAllExternalReferences'">Spin</span>

如果command-id表达式更复杂，您可以重构以使用计算属性，而不是在两个地方复制相同的逻辑。

推荐阅读