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"
/>
A commenter asked if I'd registered the Guess component. I had not. Thank you.
This fixed it:
<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
label: {
type: String,
},
value: {
type: String,
},
},
});
</script>
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>