How do you remove a subsring when data is loaded into a prop?

I am using bootstrap table to display some error messages that are stored in a database. I fetch them with Axios.
When showing the error messages in the table row, I use a substring to minimize the output to 30 characters, as they can often be over 1000 characters long.
Then I have a modal component that takes in the array as a prop and output the same error message when you click on a specific message in the table.

The problem is that I do not want the modal to show the substring when I click on one of the messages in the table. I would like the message to pop up in the modal WITHOUT the substring while still keeping it in the table, so that the user is able to see the full message when click on the substringed message.

How can I accomplish this?

Parent:

<template>
  <b-container>
    <b-card class="mt-4">
      <h5>{{ $t('events') }}</h5>
      <b-table
        :items="errors"
        :fields="fields"
        :per-page="[5, 10]"
        selectable
        :select-mode="'single'"
        @row-selected="onRowSelected"
        @row-clicked="showModal"
        sort-desc
      />
    </b-card>
    <error-log-entry-modal ref="errorLogEntryModal" :selected-error-log="selectedRows"/>
    

  </b-container>
</template>

<script>
  import {axiosService} from '@/services/error';
  import ErrorLogEntryModal from '@/components/error-log/ErrorLogEntryModal';

  export default {
    components: {
      ErrorLogEntryModal,

    },

    data() {
      return {
        errors: null,
        selectedRows: []

      };
    },
    computed: {
      fields() {
        return [
          {
            key: 'errorMessage',
            label: this.$t('message'),
            sortable: true
          },
        ]
      },

    },
    methods: {
      load(){
        if
          errorService.getErrorLogs().then(result => {
            result.data.forEach(log => log.errorMessage = log.errorMessage.substring(0,30));
            this.errors = result.data

          })
  
      },
      onRowSelected(fields){
        this.selectedRows = fields
      },

      showModal(){
        if (this.selectedRows) {
          this.$refs.errorLogEntryModal.show()
        }
      },
    },
    created() {
      this.load()
    }
  };
</script>

child:

<template>
  <b-modal
    modal-class="error-log-modal"
    v-model="showModal"
    size="xl"
    title="Error Log">
    <b-col class="lg-12" v-for="log in selectedErrorLog">
      {{ log.errorMessage }}
    </b-col>
  </b-modal>
</template>

<script>

  export default {
    props: {
      selectedErrorLog: Array
    },
    data() {
      return {
        showModal: false,
      };
    },
    methods: {
      show(){
        this.showModal = true
      }
    }
  };
</script>

Sounds like you want to undo making errorMessage a substring of its initial value. But that is not possible, once data is gone, it is lost.

If you want to show a shortened message in the table, but the full message in the modal, you can just store the shortened message in another property instead of overriding the errorMessage property:

          errorService.getErrorLogs().then(result => {
            result.data.forEach(log => log.errorMessageShort = log.errorMessage.substring(0,30));
            this.errors = result.data
          })

Then you can use errorMessageShort in the table and errorMessage in the modal.

You don't need to re-assign the error message after trimming that. You can keep the error message as it is, and at the time of rendering, display only 30 characters but when you will pass this string as a prop, it will be passed as a whole value.

My meaning is-

Remove this code-

log.errorMessage = log.errorMessage.substring(0,30));

and simply keep-

this.errors = result.data

At the time of rendering, show the error message like this-

<div v-for="error in errors">{{ error.substring(0, 30) }}</div>

And when you need to pass the error to the modal component, you can pass it as it is because it didn't trim actually.

<Modal :error="error" />

This approach is moreover like toggling between trimmed and full text. By doing this, you don't need to use multiple variables to store trimmed errors and full errors individually.