I am attempting to connect a property of an item within an array in the data object of Vue to the value attribute of an input tag using binding. However, when I inspect the DOM of a web browser, it does not display.
<template v-for="role in roles">
<tr>
<td>{{ role.Name }}</td>
<td>
<button type="button" class="btn-danger" @@click="RemoveRole(role)">Remove</button>
</td>
<td hidden>
<input type="text" :id="role.Id" name="role[]" v-model="role.Id"/> // results in just "<input type="text" id="..." name="role[]" />"
// there is no value attribute visible, but the Id attribute can give the right value?
</td>
</tr>
</template>
Although the id attribute can provide the correct value, why doesn't the value attribute work?
:value="role.Id" does not have any effect.
Any insights on this issue would be appreciated.