Send the parameters to the parent component by selecting a radio button

Question

I am working on Quasar, and I have the following issue: I currently have a table in a pop-up where the chartsSeries are passed, which are the names of the variables in the chart. In this pop-up, I have the following functionalities: changing the color of the variable to be displayed in the chart, hiding it in the chart, and finally, choosing the scale of the yAxis. To pass the parameters of the scale for each variable, I have created an additional object in the props called parameters, which is an array, and the numbering of the array corresponds exactly to that of the chartsSeries. I want to send the parameters of that variable to the parent component when selecting a Q-radio.

I would like to do something similar to the first method of hiding variables, which sends the selected.value through an emit to the parent component, but here with the parameters.

Here is the popUp code:

<template>
  <q-dialog persistent>
    <q-card class="settings-popup">
      <q-toolbar class="bg-primary">
        <q-btn flat v-close-popup round dense icon="close" />
        <q-toolbar-title>Configuración</q-toolbar-title>
      </q-toolbar>

      <q-card-section>
        <q-table
          :rows="chartSeries"
          :columns="columnas"
          row-key="name"
          selection="multiple"
          v-model:selected.sync="selected"
          @selection="manejarCambioCheckbox"
        >
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td>
                <q-checkbox
                  v-model="props.selected"
                />
              </q-td>
              <q-td class="name-cell">
                <p class="name-text">{{ props.row.name }}</p>
              </q-td>
              <q-td>
                <q-input
                  filled
                  v-model="props.row.color"
                  class="inputCambiarColor"
                  :style="{ backgroundColor: props.row.color }"
                >
                  <template v-slot:append>
                    <q-icon name="colorize" class="cursor-pointer">
                      <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                        <q-color v-model="props.row.color" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </q-td>
              <q-td class="name-cell">
                <q-radio v-model="props.row.rangoMaximo" val="escala" />
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { defineProps, ref, nextTick } from "vue";

const props = defineProps(["chartSeries", "parametros"]);

console.log(props)

const emit = defineEmits(['actualizarEstadoSeries']);

const columnas = [
  { name: "name", label: "Nombre", align: "left", field: "name" },
  { name: "color", label: "Color", align: "left", field: "color" },
  { name: "escala", label: "Escala", align: "left", field: "escala" },
];

const selected = ref(props.chartSeries);
  
const manejarCambioCheckbox = () => {
  nextTick(() => {
    emit("actualizarEstadoSeries", selected.value);
  });
};

</script>

<style scoped>
.settings-popup {
  width: 600px;
  background-color: white;
}

.name-cell {
  text-align: center;
}

.name-text {
  font-size: 18px;
  margin-bottom: 0;
}
</style>

And this is the object that is received by props which the consol.log(props) shows me:

chartSeries: Proxy(Array)
   0: {name: 'esm1entrada', data: Array(144)}
   1: {name: 'hor1entrada', data: Array(145)}
   2: {name: 'esm1salida', data: Array(145)}
parametros: Proxy(Array)
   0: {id: 1, variableID: 1, rangoMaximo: 20000, rangoMinimo: 0}
   1: {id: 2, variableID: 2, rangoMaximo: 20000, rangoMinimo: 0}
   2: {id: 3, variableID: 3, rangoMaximo: 20000, rangoMinimo: 0}

I am working on Quasar, and I have the following issue: I currently have a table in a pop-up where the chartsSeries are passed, which are the names of the variables in the chart. In this pop-up, I have the following functionalities: changing the color of the variable to be displayed in the chart, hiding it in the chart, and finally, choosing the scale of the yAxis. To pass the parameters of the scale for each variable, I have created an additional object in the props called parameters, which is an array, and the numbering of the array corresponds exactly to that of the chartsSeries. I want to send the parameters of that variable to the parent component when selecting a Q-radio.

I would like to do something similar to the first method of hiding variables, which sends the selected.value through an emit to the parent component, but here with the parameters.

Here is the popUp code:

<template>
  <q-dialog persistent>
    <q-card class="settings-popup">
      <q-toolbar class="bg-primary">
        <q-btn flat v-close-popup round dense icon="close" />
        <q-toolbar-title>Configuración</q-toolbar-title>
      </q-toolbar>

      <q-card-section>
        <q-table
          :rows="chartSeries"
          :columns="columnas"
          row-key="name"
          selection="multiple"
          v-model:selected.sync="selected"
          @selection="manejarCambioCheckbox"
        >
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td>
                <q-checkbox
                  v-model="props.selected"
                />
              </q-td>
              <q-td class="name-cell">
                <p class="name-text">{{ props.row.name }}</p>
              </q-td>
              <q-td>
                <q-input
                  filled
                  v-model="props.row.color"
                  class="inputCambiarColor"
                  :style="{ backgroundColor: props.row.color }"
                >
                  <template v-slot:append>
                    <q-icon name="colorize" class="cursor-pointer">
                      <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                        <q-color v-model="props.row.color" />
                      </q-popup-proxy>
                    </q-icon>
                  </template>
                </q-input>
              </q-td>
              <q-td class="name-cell">
                <q-radio v-model="props.row.rangoMaximo" val="escala" />
              </q-td>
            </q-tr>
          </template>
        </q-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { defineProps, ref, nextTick } from "vue";

const props = defineProps(["chartSeries", "parametros"]);

console.log(props)

const emit = defineEmits(['actualizarEstadoSeries']);

const columnas = [
  { name: "name", label: "Nombre", align: "left", field: "name" },
  { name: "color", label: "Color", align: "left", field: "color" },
  { name: "escala", label: "Escala", align: "left", field: "escala" },
];

const selected = ref(props.chartSeries);
  
const manejarCambioCheckbox = () => {
  nextTick(() => {
    emit("actualizarEstadoSeries", selected.value);
  });
};

</script>

<style scoped>
.settings-popup {
  width: 600px;
  background-color: white;
}

.name-cell {
  text-align: center;
}

.name-text {
  font-size: 18px;
  margin-bottom: 0;
}
</style>

And this is the object that is received by props which the consol.log(props) shows me:

chartSeries: Proxy(Array)
   0: {name: 'esm1entrada', data: Array(144)}
   1: {name: 'hor1entrada', data: Array(145)}
   2: {name: 'esm1salida', data: Array(145)}
parametros: Proxy(Array)
   0: {id: 1, variableID: 1, rangoMaximo: 20000, rangoMinimo: 0}
   1: {id: 2, variableID: 2, rangoMaximo: 20000, rangoMinimo: 0}
   2: {id: 3, variableID: 3, rangoMaximo: 20000, rangoMinimo: 0}

I tried passing the props in q-radio but I saw that that was not correct, and I think we need to filter the positioning of the two arrays in the props