CODEWITHSUNDEEP
javascriptvue.jsvue-composition-api
mending3
mending3

Reputation: 712

Copy text from a row and paste into "the neighbor" row of another column when contenteditable is true

current result: when I click a row, it fills the entire row of another column rather than single row of another column

<p
  class="p-of-that"
  v-html="thatText"
  contenteditable
  @click="writeThat(myArr, $event)"
></p>

It should be "kind of" like this when I click one of That's row

enter image description here

the same thing applies to "Johan". When the given row is clicked, "Johan" appears and "Michael" text is persisted

this is the reproduction: https://codesandbox.io/s/boring-dirac-mk3sk

click a row inside "That" column

I hope it fits the bigger picture

Upvotes: 0

Views: 135

Answers (2)

Samir Ribeiro
Samir Ribeiro

Reputation: 205

I'm not sure if I will solve your issue. But I'm going to try to give you an idea. First of all, you need to think in an array of 2 dimensions. For example:

const myTable = [
    [myObject1, myObject2],
    [myObject3, myObject4]
];

Or an objects with some place to the second column. For example:

const myTable = [
    {
        id, column1, column2
    }
];

Then, the click on the second column will make column2 receive values from column1. Finally, you update your array and it's done!

Applying what I said!

<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>

Upvotes: 1

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

When clicking a row at that time you are passing the complete object to the writeThat function, you just need to pass the myArr.name in the function instead of passing the whole myArr.

Also, add an if condition to check for the current value of thatText and the myArr.name.

<table border="1">
    <thead>
        <th>This</th>
        <th>That</th>
    </thead>
    <tbody>
        <tr v-for="myArr in myArrs" :key="myArr.id">
            <td style="width: 120px">{{ myArr.name }}</td>
            <td style="width: 120px" @click="writeThat(myArr.name, $event)" contenteditable>
                <p
                    v-if="thatText === myArr.name"
                    class="p-of-that"
                    v-html="thatText"
                ></p>
             </td>
         </tr>
    </tbody>
</table>

Also when handling the call for writeThat, update the value of thatText like:

const writeThat = (data, e) => {
    thatText.value = data
    console.log(e);
};

Upvotes: 0

Related Questions