v-bind without default ending space

[kaikaibenkai]

When I wrote down this, I was surprised to find that the binding value would end with a space by default.

I checked the compiled rendering function:

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($setup.list, (item) => {
    return (_openBlock(), _createElementBlock("span", { key: item }, [
      _createTextVNode(_toDisplayString(item) + " ", 1 /* TEXT */),
//                                            ^^^^^    <---- HERE
      _createElementVNode("sup", null, _toDisplayString(item - 1), 1 /* TEXT */)
    ]))
  }), 128 /* KEYED_FRAGMENT */))
}

Why is there a space here? Or how to remove this space?

[adenvt]

No, that not Vue mistake, that actually how HTML work. Multiple space is count as single space, including the breakline.

In vanilla HTML, this code:

<span>
	Hello
	<sup>1</sup>
</span>

is equal to this:

<span>
	Hello	<sup>1</sup>
</span>

So, if you don't wanna add the space, you need to write like this:

<template>
  <span v-for='item in list' :key='item'>
    {{ item }}<sup>{{ item - 1 }}</sup>
  </span>
</template>

[kaikaibenkai]

I got it. Thank you!