Как сделать input при клике на текст?

Question

[Александр]

Добрый день. Есть обычная ячейка в таблице, в которой записан текст. Нужно чтобы при клике на эту ячейку, в нее вставлялся input со значениями из ячейки, как это можно сделать?

Answer 1

[0xD34F]

data: () => ({
  items: Array.from(
    { length: 5 },
    (_, i) => Array.from(
      { length: 5 },
      (_, j) => i * 5 + j
    )
  ),
  active: null,
}),
watch: {
  active(val) {
    if (val) {
      this.$nextTick(() => this.$refs.input[0].focus());
    }
  },
},

<table>
  <tr v-for="(row, iRow) in items">
    <td v-for="(val, iCol) in row" @click="active = { iRow, iCol }">
      <input
        v-if="active && active.iRow === iRow && active.iCol === iCol"
        v-model="row[iCol]"
        @keypress.enter="active = null"
        ref="input"
      >
      <template v-else>{{ val }}</template>
    </td>
  </tr>
</table>

https://jsfiddle.net/grtsxoaf/