How to display input opposite the desired checkbox?

Question

Vue.js

Hello everyone, there is a need to show inputs opposite the desired checkbox, I can’t figure out how to fix them opposite the desired one.

code pen

Answer 1

data: () => ({
  items: Array.from({ length: 4 }, () => ({
    checked: false,
    value: '',
  })),
}),

<div v-for="(n, i) in items">
  <label>
    <input type="checkbox" v-model="n.checked">
    {{ i }}
  </label>
  <input v-if="n.checked" v-model="n.value">
</div>