Adds the `key: number` property to a slot props if this slot has `v-if`

[artmakarov]

Vue version

3.4.38

Link to minimal reproduction

https://play.vuejs.org/#eNq1lG1v2jAQx7/KzXtBK7HQjk6aGKA9qJM2aVu19mWkKQsOdevEke1QJsR3350dggMFhta+QeF8d/75Hv4L9qEso1nF2YANLc9LmVg+jguA4SeVl/A+lSK9H8Usk8l09IJ+Y+bO0WPlDy8zoY1FLyOVvdKqNDGD2SuR1YFNCAZNxGz8mdyh4A+QqsLywkZwjZFQUugAFgtoEsFyOexRTH1nL4DcwjAc803+nePa+f8/CBm2YOyt0Eew3JD786Bgf1Sl7e0RDXL+z0YjsqNgyP0pWIY9mmn83JiioUm1KC3IpJgigyUew21FriIvlbawAM2zLqjim6qQYQJLyLTKoYOr03nXuLmd8QeRu4xWi87jAtlx5ul9MKJkJ1kiDT91Z03ak5NTGI1hQbRIcCNyriobWsGliGaJrDgmsrrimAJg2YXzs7Mzyrekn2HPP2rMuvggvDwT0+jOqAIX3SWKWYp8QnL9o7QC4WKGtaxbxhIp1cNXZ6Mruit7esvT+0fsd2ZOtphdaW64nvGYNWc20VNu/fHl9Xc+x+/mMFeTSqL3nsOf3ChZEaN3+1gVE8QO/BztF9cCUUxvzOUcx8SsHkWgvkT+3dgSas2up69x+1HfxWFJsYqrdm4rZTBwzZTX8+zuDuaZJhWKJOc066SCbvR/C6dazkCjXS9FE9aSzQnPkkrancvQzrKxEbQExLBHTh1iC38F7OU1JPaWx5BDfT1EvJFla4lr4JCvJnIaGwI5w04er7GHcNo5DtAc1XCnqq2OO8u+lnshPtjzdp6nbLoT6/aUomFnib1YH57RMMeuEtOnNx8h2LXOtpdghAJuubEDOKd19j6bY7d2er122hiGtU9/7bNZfXK6538G0PEn9KfTreMugrh2FYIwV8Qw6g1FNZoeF6hHv2Zck8ahHvWji6j/li3/AsMaRzg=

Steps to reproduce

Specify a slot props without the key property. Add v-if for this slot or the parent <template />.

What is expected?

The key property is missing if not physically specified.

What is actually happening?

The key: number property is added.

System Info

No response

Any additional comments?

No response

[linzhe141]

Vue internally sets a key for elements using v-if
It might be related to this pull request.

core/packages/compiler-core/src/transforms/vIf.ts

Lines 40 to 63 in 342657b

	return processIf(node, dir, context, (ifNode, branch, isRoot) => {
	// #1587: We need to dynamically increment the key based on the current
	// node's sibling nodes, since chained v-if/else branches are
	// rendered at the same depth
	const siblings = context.parent!.children
	let i = siblings.indexOf(ifNode)
	let key = 0
	while (i-- >= 0) {
	const sibling = siblings[i]
	if (sibling && sibling.type === NodeTypes.IF) {
	key += sibling.branches.length
	}
	}
	// Exit callback. Complete the codegenNode when all children have been
	// transformed.
	return () => {
	if (isRoot) {
	ifNode.codegenNode = createCodegenNodeForBranch(
	branch,
	key,
	context,
	) as IfConditionalExpression
	} else {

[Procrustes5]

I want to contribute to this issue.
But before that, is it correct that to solve this problem, we still need to set a key when using v-if, and the goal is to not expose that key as a prop of the slot?

[artmakarov]

I want to contribute to this issue. But before that, is it correct that to solve this problem, we still need to set a key when using v-if, and the goal is to not expose that key as a prop of the slot?

Yes, that's right. But the physically set key prop must be passed.