Meituan-Dianping/mpvue · warning

text "${children[i].text.trim()}" between v-if and v-else(-i

Error message

text "${children[i].text.trim()}" between v-if and v-else(-if) will be ignored.

What it means

Text content found between a v-if element and its v-else/v-else-if sibling is discarded, since only element nodes participate in the if/else chain. The compiler warns about the specific text (unless it's a single space) and pops it from the children list.

Source

Thrown at packages/weex-template-compiler/build.js:1708

      exp: el.elseif,
      block: el
    });
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      "v-" + (el.elseif ? ('else-if="' + el.elseif + '"') : 'else') + " " +
      "used on element <" + (el.tag) + "> without corresponding v-if."
    );
  }
}

function findPrevElement (children) {
  var i = children.length;
  while (i--) {
    if (children[i].type === 1) {
      return children[i]
    } else {
      if (process.env.NODE_ENV !== 'production' && children[i].text !== ' ') {
        warn(
          "text \"" + (children[i].text.trim()) + "\" between v-if and v-else(-if) " +
          "will be ignored."
        );
      }
      children.pop();
    }
  }
}

function addIfCondition (el, condition) {
  if (!el.ifConditions) {
    el.ifConditions = [];
  }
  el.ifConditions.push(condition);
}

function processOnce (el) {
  var once$$1 = getAndRemoveAttr(el, 'v-once');

View on GitHub (pinned to 6c5d78ee04)

Solutions

  1. Remove the text between the v-if and v-else elements
  2. Move the text inside one of the conditional branches
  3. Keep only plain whitespace between the conditional siblings

Example fix

// before
<div v-if="ok">A</div>
note here
<div v-else>B</div>
// after
<div v-if="ok">A</div>
<div v-else>B</div>
Defensive patterns

Strategy: validation

Validate before calling

function textBetweenIfElse(template) {
  // flag non-whitespace text between a v-if element and a following v-else
  const re = /v-if=[^>]*>([^<]+)<[^>]*v-else/;
  const m = template.match(re);
  return m && m[1].trim() ? `stray text "${m[1].trim()}" between v-if and v-else` : null;
}

Prevention

When it happens

Trigger: Placing non-whitespace text (or comments) between an element with v-if and the following element with v-else/v-else-if, so findPrevElement encounters a non-element child with text !== ' ' during dev-mode compilation.

Common situations: Formatting templates with explanatory text between conditional blocks, leftover stray characters between elements, or whitespace-significant editing that left text nodes in between.

Related errors


AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/31ebdcca79b2b987. Report an issue: GitHub.