It's uncertain if the issue will be resolved, but an attempt will be made to provide guidance. Initially, consider working with a two-dimensional array like this:
const myTable = [
[myObject1, myObject2],
[myObject3, myObject4]
];
Alternatively, utilize objects with designated space for the second column:
const myTable = [
{
id, column1, column2
}
];
Subsequently, clicking on the second column should result in values from column1 being transferred to column2. Update the array accordingly to complete the process!
Implementation of Suggestions
<template>
<div id="app">
<table border="1">
<thead>
<th>This</th>
<th>That</th>
</thead>
<tbody>
<tr v-for="(myArr, index) in myArrs" :key="index">
<td style="width: 120px">{{ myArr.column1.name }}</td>
<td style="width: 120px">
<p class="p-of-that" contenteditable @click="writeThat(index)">
{{ myArr.column2.name }}
</p>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "App",
data: () => ({
myArrs: [
{
column1: { id: 1, name: "Michael" },
column2: { id: 1, name: "" },
},
{
column1: { id: 2, name: "Johan" },
column2: { id: 2, name: "" },
},
],
}),
methods: {
writeThat(index) {
this.myArrs[index].column2 = this.myArrs[index].column1;
},
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>