PowerMeter admin view: make the linter happy

* do not combine v-if and v-for
* add v-bind:key to for loop of HTTPS+JSON power meter value configs
This commit is contained in:
Bernhard Kirchen 2024-06-26 23:03:05 +02:00
parent 9911dec279
commit 3fe39d722c

View File

@ -42,45 +42,48 @@
</div> </div>
</div> </div>
<CardElement v-if="powerMeterConfigList.source === 0" <!-- yarn linter wants us to not combine v-if with v-for, so we need to wrap the CardElements //-->
v-for="(mqtt, index) in powerMeterConfigList.mqtt.values" <div v-if="powerMeterConfigList.source === 0">
:text="$t('powermeteradmin.MqttValue', { valueNumber: index + 1})" <CardElement
textVariant="text-bg-primary" v-for="(mqtt, index) in powerMeterConfigList.mqtt.values" v-bind:key="index"
add-space> :text="$t('powermeteradmin.MqttValue', { valueNumber: index + 1})"
textVariant="text-bg-primary"
add-space>
<InputElement :label="$t('powermeteradmin.MqttTopic')" <InputElement :label="$t('powermeteradmin.MqttTopic')"
v-model="mqtt.topic" v-model="mqtt.topic"
type="text" type="text"
maxlength="256" maxlength="256"
wide /> wide />
<InputElement :label="$t('powermeteradmin.mqttJsonPath')" <InputElement :label="$t('powermeteradmin.mqttJsonPath')"
v-model="mqtt.json_path" v-model="mqtt.json_path"
type="text" type="text"
maxlength="256" maxlength="256"
:tooltip="$t('powermeteradmin.valueJsonPathDescription')" :tooltip="$t('powermeteradmin.valueJsonPathDescription')"
wide /> wide />
<div class="row mb-3"> <div class="row mb-3">
<label for="mqtt_power_unit" class="col-sm-4 col-form-label"> <label for="mqtt_power_unit" class="col-sm-4 col-form-label">
{{ $t('powermeteradmin.valueUnit') }} {{ $t('powermeteradmin.valueUnit') }}
</label> </label>
<div class="col-sm-8"> <div class="col-sm-8">
<select id="mqtt_power_unit" class="form-select" v-model="mqtt.unit"> <select id="mqtt_power_unit" class="form-select" v-model="mqtt.unit">
<option v-for="u in unitTypeList" :key="u.key" :value="u.key"> <option v-for="u in unitTypeList" :key="u.key" :value="u.key">
{{ u.value }} {{ u.value }}
</option> </option>
</select> </select>
</div>
</div> </div>
</div>
<InputElement <InputElement
:label="$t('powermeteradmin.valueSignInverted')" :label="$t('powermeteradmin.valueSignInverted')"
v-model="mqtt.sign_inverted" v-model="mqtt.sign_inverted"
:tooltip="$t('powermeteradmin.valueSignInvertedHint')" :tooltip="$t('powermeteradmin.valueSignInvertedHint')"
type="checkbox" type="checkbox"
wide /> wide />
</CardElement> </CardElement>
</div>
<CardElement v-if="(powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2)" <CardElement v-if="(powerMeterConfigList.source === 1 || powerMeterConfigList.source === 2)"
:text="$t('powermeteradmin.SDM')" :text="$t('powermeteradmin.SDM')"