Why is Vue putting my element body in an attribute?

This is my template for “Guess”:

<template>
  <div :name="label">
    Kevin was here:{{ value }}
  </div>
</template>

But the produced HTML looks like this actual output:

<div label="guess-0" value="Kevin"> Kevin was here:</div>

Expected output:

<div label="guess-0"> Kevin was here: Kevin</div>

Here’s how I’m using the template:

data: () => ({
  guesses: [
    "Kevin",
    "Apple",
    "",
    "",
    "",
    "",
  ]
}),

<Guess
  v-for="(guess, i) in guesses"
  :key="`guess-${i}`"
  :label="`guess-${i}`"
  :value="guess"
/>

Answer

On your component usage, you injected dependencies just fine as below

<Guess
  v-for="(guess, i) in guesses"
  :key="`guess-${i}`"
  :label="`guess-${i}`"
  :value="guess"
/>

then inside this component how do you pickup these dependencies to that you can use em’?… as you’ve guessed, you need props

<template>
  <div :name="label">
    Kevin was here:{{ value }}
  </div>
</template>

<script>
   export default {
     props: {
        label: {
            type: String,
        },
        value: {
            type: String,
        },
    },
    }
</script>