x-model overwrite defined value attribute for checkbox

[stefanodelpero]

I have a a table with <template> row, x-data with some rows and an "add new" button for new rows.
I use x-model to automatically check radio buttons and checkboxes.

When I press "add new" button (rows.push[]), alpine.js correctly render the radio buttons, each one with the value attribute set as is in the <template>. Checkboxes instead have value=''. If I remove x-model the problem disappears (but checkboxes are no more checked).

Also on https://codepen.io/epic2001/pen/GREJzoq

That's all the code:

<table class="table table-sm table-striped" x-data="{ rows: [ { 'R': '1', 'C': [ '2' ] }, { 'R': '3', 'C': [ '1', '2' ] } ] }">
  <thead>
    <tr>
      <th>Checkbox</th>
      <th>Radio</th>
      <th><button type="button" class="btn btn-outline-primary btn-sm" @click="rows.push({})">Add row</button></th>
    </tr>
  </thead>
  <tbody>
    <template x-for="(row, rowIndex) in rows">
      <tr>
        <td x-effect="itemIndex = ''">
          <div class="form-check" x-data="{ itemIndex: '-0' }">
              <input class="form-check-input" type="radio" value="1" x-bind:id="`R${rowIndex}${itemIndex}`" x-bind:name="`R${rowIndex}`" x-model="row.R" />
              <label class="form-check-label" x-bind:for="`R${rowIndex}${itemIndex}`">Radio 1</label>
          </div>
          <div class="form-check" x-data="{ itemIndex: '-1' }">
              <input class="form-check-input" type="radio" value="2" x-bind:id="`R${rowIndex}${itemIndex}`" x-bind:name="`R${rowIndex}`" x-model="row.R" />
              <label class="form-check-label" x-bind:for="`R${rowIndex}${itemIndex}`">Radio 2</label>
          </div>
          <div class="form-check" x-data="{ itemIndex: '-2' }">
              <input class="form-check-input" type="radio" value="3" x-bind:id="`R${rowIndex}${itemIndex}`" x-bind:name="`R${rowIndex}`" x-model="row.R" />
              <label class="form-check-label" x-bind:for="`R${rowIndex}${itemIndex}`">Radio 3</label>
          </div>
        </td>
        <td x-effect="itemIndex = ''">
          <div class="form-check" x-data="{ itemIndex: '-0' }">
              <input class="form-check-input" type="checkbox" value="1" x-bind:id="`C${rowIndex}${itemIndex}`" x-bind:name="`C${rowIndex}`" x-model="row.C" />
              <label class="form-check-label" x-bind:for="`C${rowIndex}${itemIndex}`">Checkbox 1</label>
          </div>
          <div class="form-check" x-data="{ itemIndex: '-1' }">
              <input class="form-check-input" type="checkbox" value="2" x-bind:id="`C${rowIndex}${itemIndex}`" x-bind:name="`C${rowIndex}`" x-model="row.C" />
              <label class="form-check-label" x-bind:for="`C${rowIndex}${itemIndex}`">Checkbox 2</label>
          </div>
          <div class="form-check" x-data="{ itemIndex: '-2' }">
              <input class="form-check-input" type="checkbox" value="3" x-bind:id="`C${rowIndex}${itemIndex}`" x-bind:name="`C${rowIndex}`" x-model="row.C" />
              <label class="form-check-label" x-bind:for="`C${rowIndex}${itemIndex}`">Checkbox 3</label>
          </div>
        </td>
        <td></td>
      </tr>
    </template>
  </tbody>
</table>

[SimoTod]

Your code is invalid, you are binding row.C but the new line doesn't have any C property.
The correct code would be rows.push({C: [], R: []}).

Radios are somehow handling it, checkbox don't. It could probably be improved to offer a better dev experience. Generally speaking, when you refer to a property, that property should exist in x-data otherwise you can get odd behaviours.

P.s. this project doesn't use the issues tab.

[stefanodelpero]

Thank you!