Как проверить есть ли определенный класс у родительского компонента во Vue?

Question

[Black_Fire]

Например, есть родительский компонент с параметрами, который отрисовывает несколько элементов (инпутов):

<template v-else v-for="field of dynamicFields">
            <service-field
              :key="field.name"
              v-model="field.value"
              v-bind="field"
              :label=field.label
              :rules="field.rules"
              :placeholder="field.placeholder"
              :name="field.name"
              :readonly="field.readonly"
              class="dynamic-form-fields__field"
              :class="{
                'dynamic-form-fields__field_full-width': field.fullWidth,
                'dynamic-form-fields__field_bitpro24': theme === 'bitpro24'
              }"
            />
          </template>

А внутри ServiceField:

<template>
  <div class="service-field">
    <label :for="id" class="service-field__label">{{ label || name || '' }}</label>
    <v-text-field
      :id="id"
      v-mask="input_mask || '~'"
      :placeholder="placeholder"
      :rules="rules"
      :value="textValue"
      validate-on-blur
      outlined
      :disabled="readonly"
      v-on="$listeners"
    />
  </div>
</template>
<script>
  import { v4 as uuidv4 } from "uuid";
  import { mask } from "../../spa/common/directives";

  export default {
    name: "ServiceField",
    inheritAttrs: true,
    directives: { mask },
    props: {
      name: { type: String, default: null },
      label: { type: String, default: null },
      rules: { type: Array, default: null },
      regex: { type: String, default: null },
      input_mask: { type: String, default: null },
      min_length: { type: Number, default: null },
      max_length: { type: Number, default: null },
      required: { type: Boolean, default: false },
      readonly: { type: Boolean, default: false },
      placeholder: { type: String, default: null },
      value: null
    },
    data() {
      return {
        menu: false,
        id: null,
      };
    },
    computed: {
      textValue: {
        get() {
          return this.value;
        }
      }
    },
    mounted() {
      this.id = uuidv4();
    }
  };
</script>

Нужно отобразить собственный label для инпута у корневого элемента которого div.service-field есть класс dynamic-form-fields__field_full-width. Сейчас label отображается для всех инпутов с данными, которые пришли от родительского компонента. Но именно для одного из них, нужно сделать свой label, а у остальных оставить как есть.

Answer 1

[Сергей Левченко]

Вопрос задан как-то странно. Но на сколько понял, вижу такие варианты:
1) Маппинг dynamicFields - ищите в массиве нужный элемент и задаете ему необходимый label
2) Добавить новый prop в ServiceField - fullWidth (:full-width="field.fullWidth") и уже от него менять label
3) Повесить на ServiceField ref тем самым получив доступ к css классам и прочему