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 <select> na kterém je použita validace (pomocí vee-validate). A nyní mi jde o to, jestli je (možné) a správně vytvořit komponentu "select.vue" a tu zavolat v komponentě radio.vue a poslat si do ní parametry pro daný item. Nebo toto je správná, byť dlouhá cesta (myšleno dlouhý kód).
Děkuji za rady od zkušenějších.
// radio.vue
Kód:<tr> <th>TX Frequency [{{ $store.state.updateState.radioUnit }}]</th> <td v-if="[1, 3].includes($store.getters.getChannel)" > <ValidationProvider name="TxF_Loc_Ch1" :rules="`required|numeric|between: ${$store.state.cnf.rad.txf.minE[0] / 1000}, ${$store.state.cnf.rad.txf.maxE[0] / 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', [ values.oldTxfLocCh1.toString(), $event, '13', 'TxfLocCh1', 'set rad1 txf', validate($event) ])" > <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[0] / 1000}} .. {{$store.state.cnf.rad.txf.maxE[0] / 1000 }} {{ $store.state.updateState.radioUnit }}</span> </v-tooltip> </v-text-field> <span v-if="errors.length > 0" class="block-error block-error__main" >{{ errors[0] }}</span> </ValidationProvider> </td> <td v-if="[2, 3].includes($store.getters.getChannel)" > <ValidationProvider name="TxF_Loc_Ch1" :rules="`required|numeric|between: ${$store.state.cnf.rad.txf.minE[4] / 1000}, ${$store.state.cnf.rad.txf.maxE[4] / 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', [ values.oldTxfLocCh2.toString(), $event, '13', 'TxfLocCh2', 'set rad2 txf', validate($event)])" > <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[4] / 1000}} .. {{$store.state.cnf.rad.txf.maxE[4] / 1000 }} {{ $store.state.updateState.radioUnit }}</span> </v-tooltip> </v-text-field> <span v-if="errors.length > 0" class="block-error block-error__main" >{{ errors[0] }}</span> </ValidationProvider> </td> <td v-if="[1, 3].includes($store.getters.getChannel)" > <ValidationProvider name="TxF_Rem_Ch1" :rules="`required|numeric|between: ${$store.state.cnf.rad.rxf.minE[0] / 1000}, ${$store.state.cnf.rad.rxf.maxE[0] / 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', [ values.oldTxfRemCh1.toString(), $event, '13', 'TxfRemCh1', 'rem1 set rad1 txf', validate($event)]), 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[0] / 1000}} .. {{$store.state.cnf.rad.rxf.maxE[0] / 1000 }} {{ $store.state.updateState.radioUnit }}</span> </v-tooltip> </v-text-field> <span v-if="errors.length > 0" class="block-error block-error__main" >{{ errors[0] }}</span> </ValidationProvider> </td> <td v-if="[2, 3].includes($store.getters.getChannel)" > <ValidationProvider name="TxF_Rem_Ch2" :rules="`required|numeric|between: ${$store.state.cnf.rad.rxf.minE[4] / 1000}, ${$store.state.cnf.rad.rxf.maxE[4] / 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', [ values.oldTxfRemCh2.toString(), $event, '13', 'TxfRemCh2', 'rem1 set rad2 txf', validate($event)])" > <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[4] / 1000}} .. {{$store.state.cnf.rad.rxf.maxE[4] / 1000 }} {{ $store.state.updateState.radioUnit }}</span> </v-tooltip> </v-text-field> <span v-if="errors.length > 0" class="block-error block-error__main" >{{ errors[0] }}</span> </ValidationProvider> </td> </tr>
Nezaspěte Vánoce, díky affiliate marketingu!
WEBINÁŘ -
Záznam