필요에 따라 필드를 표시하는 방법 확인

필요에 따라 필드를 표시하는 방법 확인

인터넷에서 양식에 입력하려고 하면 필수 필드가 빨간색 '*' 마크를 사용하여 필수 필드임을 나타냅니다.

이와 같이 사용자에게 vuetify.js로 필수 필드를 표시하는 방법이 있습니까?

조금 번거롭지만 슬롯이라는 이름의 '라벨'이 있으며 다음과 같은 작업을 수행할 수 있습니다.

<v-text-field
    v-model="loginInfo.email"
    autofocus
    name="email"
    type="email">
  <template #label>
    <span class="red--text"><strong>* </strong></span>Email
  </template>
</v-text-field>

v1.1.0 문서부터:

필요한 프로포트가 라벨에 아스타리스크를 명시적으로 추가하지 않게 되었습니다.v1.0에서는 검증에 대한 모든 기능이 제거되었습니다.

따라서 아무것도 더 이상 필요 이상으로 설정되지 않으므로 라벨에 수동으로 추가해야 합니다.

label="Name*"

---

또는 CSS를 사용할 수 있습니다.

.required label::after {
    content: "*";
}

추가할 필요가 있습니다.required수동으로 클래스 이름을 지정합니다(물론 클래스 이름은 임의입니다.

규칙 소품을 에 전달할 수 있습니다.v-text-field.

예,

<v-text-field
  v-model="title"
  :rules="['Required']"
  label="Title"
  counter
  maxlength="20"
></v-text-field>

상세한 것에 대하여는, 다음의 Vuetify 의 예를 참조해 주세요.https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/text-fields/validation.vue

required는 HTML 속성이기도 합니다.다음과 같이 HTML 요소에 추가할 수 있습니다.

<v-text-field
  v-model="title"
  label="Title"
  counter
  maxlength="20"
  required
></v-text-field>

이 css 클래스를 메인 css 파일 또는 main.js에 추가하는 솔루션이 있습니다.

div[aria-required=true].v-input .v-label::after {
  content: " *";
  color: red;
}

이것으로 끝입니다.필요한 추가 필드:

<v-text-field required>

퍼포먼스 면에서는, 이것이 최적인 솔루션인지 어떤지 모르겠습니다.하지만 그것은 효과가 있다.

응용 프로그램 부트스트랩(또는 그와 유사한 것)으로 JavaScript 파일을 가져옵니다.

import Vue from 'vue';

Vue.mixin({
    mounted() {
        const e = this.$el;

        if ('querySelector' in this.$el) {
            const i = this.$el.querySelector('input[required]');

            if (i !== null) {
                const l = i.previousSibling;

                if (l.querySelector('.required.sign') === null) {
                    const r = document.createElement('span');

                    // l.classList.add('required');
                    r.classList.add('required', 'sign');

                    r.appendChild(document.createTextNode('*'));
                    l.appendChild(r);
                }
            }
        }
    },
});

Nuxt.js: 위의 파일을 에 저장합니다.plugins폴더입니다.경로 포함plugins에 배열하다nuxt.config.js파일.

글로벌 CSS/테마에 규칙을 추가합니다.

.v-label  > .required.sign {
    color: darkred;
    font-weight: bold;
    margin-left: .25em;
}

언급URL : https://stackoverflow.com/questions/52158705/vuetify-how-to-mark-field-as-required