Správná tvorba subkomponent v komponentě

28. 11. 2022 13:16:59

Ahoj všem, mám otázka ohledně Vue.js. Mám vytvořenou komponentu (pracuji s vuetify frameworkem) a v ní mám jednotlivé řádky tabulky, kde jeden typický řádek je následující.

Jedná se o tag

<tr>
    <th>TX Frequency </th>
    <td
        v-if=".includes($store.getters.getChannel)"
    >
        <ValidationProvider 
            name="TxF_Loc_Ch1" 
            :rules="`required|numeric|between: ${$store.state.cnf.rad.txf.minE / 1000}, ${$store.state.cnf.rad.txf.maxE / 1000}`" 
            v-slot="{ errors, pristine, validate }"
            class="position-relative"
        >
            <v-text-field 
                ref="TxfLocCh1"
                type="number"
                v-model="values.upTxfLocCh1"
                @click="catchOldValue('oldTxfLocCh1', pristine)"
                @input="$store.dispatch('dataChange', )"
            >
                <v-tooltip slot="append" attach left>
                    <template v-slot:activator="{ on }">
                        <v-icon v-on="on" color="primary" dark>
                        mdi-information-outline
                        </v-icon>
                    </template>
                    <span>TXF range: {{ $store.state.cnf.rad.txf.minE / 1000}} .. {{$store.state.cnf.rad.txf.maxE / 1000 }} {{ $store.state.updateState.radioUnit }}</span>
                </v-tooltip>
            </v-text-field>
            <span 
                v-if="errors.length > 0" 
                class="block-error block-error__main"
            >{{ errors }}</span>
        </ValidationProvider>
    </td>

<td
        v-if=".includes($store.getters.getChannel)"
    >
        <ValidationProvider 
            name="TxF_Loc_Ch1" 
            :rules="`required|numeric|between: ${$store.state.cnf.rad.txf.minE / 1000}, ${$store.state.cnf.rad.txf.maxE / 1000}`" 
            v-slot="{ errors, pristine, validate }"
            class="position-relative"
        >
            <v-text-field 
                ref="TxfLocCh2"
                type="number"
                v-model="values.upTxfLocCh2"
                @click="catchOldValue('oldTxfLocCh2', pristine)"
                @input="$store.dispatch('dataChange', )"
            >
                <v-tooltip slot="append" attach left>
                    <template v-slot:activator="{ on }">
                        <v-icon v-on="on" color="primary" dark>
                        mdi-information-outline
                        </v-icon>
                    </template>
                    <span>TXF range: {{ $store.state.cnf.rad.txf.minE / 1000}} .. {{$store.state.cnf.rad.txf.maxE / 1000 }} {{ $store.state.updateState.radioUnit }}</span>
                </v-tooltip>
            </v-text-field>
            <span 
                v-if="errors.length > 0" 
                class="block-error block-error__main"
            >{{ errors }}</span>
        </ValidationProvider>
    </td>
    <td
        v-if=".includes($store.getters.getChannel)"    
    >
        <ValidationProvider 
            name="TxF_Rem_Ch1" 
            :rules="`required|numeric|between: ${$store.state.cnf.rad.rxf.minE / 1000}, ${$store.state.cnf.rad.rxf.maxE / 1000}`" 
            v-slot="{ errors, pristine, validate }"
            class="position-relative"
        >
            <v-text-field 
                ref="TxfRemCh1"
                type="number"
                v-model="values.upTxfRemCh1"
                @click="catchOldValue('oldTxfRemCh1', pristine)"
                @input="$store.dispatch('dataChange', ), formErrors"
            >
                <v-tooltip slot="append" attach left>
                    <template v-slot:activator="{ on }">
                        <v-icon v-on="on" color="primary" dark>
                        mdi-information-outline
                        </v-icon>
                    </template>
                    <span>TXF range: {{ $store.state.cnf.rad.rxf.minE / 1000}} .. {{$store.state.cnf.rad.rxf.maxE / 1000 }} {{ $store.state.updateState.radioUnit }}</span>
                </v-tooltip>
            </v-text-field>
            <span 
                v-if="errors.length > 0" 
                class="block-error block-error__main"
            >{{ errors }}</span>
        </ValidationProvider>
    </td>
    <td 
        v-if=".includes($store.getters.getChannel)"    
    >
        <ValidationProvider 
            name="TxF_Rem_Ch2" 
            :rules="`required|numeric|between: ${$store.state.cnf.rad.rxf.minE / 1000}, ${$store.state.cnf.rad.rxf.maxE / 1000}`" 
            v-slot="{ errors, pristine, validate }"
            class="position-relative"
        >
            <v-text-field 
                ref="TxfRemCh2"
                type="number"
                v-model="values.upTxfRemCh2"
                @click="catchOldValue('oldTxfRemCh2', pristine)"
                @input="$store.dispatch('dataChange', )"
            >
                <v-tooltip slot="append" attach left>
                    <template v-slot:activator="{ on }">
                        <v-icon v-on="on" color="primary" dark>
                        mdi-information-outline
                        </v-icon>
                    </template>
                    <span>TXF range: {{ $store.state.cnf.rad.rxf.minE / 1000}} .. {{$store.state.cnf.rad.rxf.maxE / 1000 }} {{ $store.state.updateState.radioUnit }}</span>
                </v-tooltip>
            </v-text-field>
            <span 
                v-if="errors.length > 0" 
                class="block-error block-error__main"
            >{{ errors }}</span>
        </ValidationProvider>
    </td>
</tr>

28. 11. 2022 13:16:59