슬롯의 입력 요소에 vee-validate/HTML 속성 추가

슬롯의 입력 요소에 vee-validate/HTML 속성 추가

어플리케이션에는 많은 폼이 있으며 대부분의 입력은 다음과 같습니다.

<div class="form-group">
    <label for="language">{{ $t('form.language')}}</label>
    <input type="text" class="form-control" id="language" name="form.language" v-model="language" v-validate.initial="'required'" :data-vv-as="$t('form.language')" />
    <span class="invalid-feedback">{{ errors.first('language') }}</span>
</div>

이것은 몇 번이고 반복됩니다.실제로 변경되는 것은 필드 이름과 입력 유형뿐입니다.경우에 따라서는 선택 항목일 수도 있고 단순한 HTML 구성 요소 대신 더 복잡한 구성 요소일 수도 있습니다.

제 생각은 일종의 래퍼 컴포넌트를 만드는 것입니다.이 모든 것을 복사하지 않아도 되고, 간단하게 다음과 같은 것을 사용할 수 있습니다.

<form-group name="language">
    <input type="text" v-model="form.language">
</form-group>

이 방법으로 구현하려고 했지만 작동하지 않습니다.

<template>
    <div class="form-group">
        <label :for="name">{{ $t('form.' + name)}}</label>
        <slot class="form-control"
              :id="name"
              :data-vv-name="name"
              v-validate.initial="'required'"
              :data-vv-as="$t('form.'+ name)">
        </slot>
        <span class="invalid-feedback">{{ errors.first(name) }}</span>
    </div>
</template>

<script>
    export default {
        props: ['name']
    }
</script>

좋은 생각 있어요?문제는 슬롯이 있는 요소/컴포넌트에 믹스인과 소품을 쉽게 전달할 수 없다는 것입니다.

스코프 슬롯(Vue 2.5.0+)은 어떻습니까?

<!-- form-group.vue -->
<template>
  <div>
    <label />
    <slot v-bind="$props" />
    <span />
  </div>
</template>

위의 모든 소품들은<form-group>를 사용하여 슬롯에 바인드됩니다.v-bind. 특정 필드만 지정할 수 있습니다.<slot :id="name" :data-vv-name="name" />

<form-group name="age">
  <input type="number" slot-scope="slotProps" v-bind="slotProps" />
</form-group>

여기, 그<input>를 사용하여 슬롯 소품에 액세스 할 수 있습니다.slot-scope이름을 붙입니다(여기서).slotProps).slotProps모든 소품을 포함하다<slot>에서 정의한 바와 같이form-group.vue.

기타 예:

<form-group name="language">
  <input type="text" slot-scope="sp" v-bind="sp" />
</form-group>

<form-group name="hello" value="friend">
  <span slot-scope="sp">
    {{ sp.name }}: {{ sp.value }}
  </span>
</form-group>

댓글에 기재되어 있는 바와 같이, 에서 슬롯의 내용물로 소품을 전달할 수 없습니다.<input>.

이것은 매우 복잡한 경우이기 때문에 기본 속성 세트를 적용하면서 사용자 지정 속성을 새 태그로 전송하는 렌더 함수를 사용해야 합니다.

https://codepen.io/anon/pen/Ozadop?editors=1010에서 개념 검증을 실시했습니다.https://codepen.io/anon/pen/Ozadop?editors=1010

Vue.component('my-input', {
  render: function(createElement) {
    const defaultSlot = this.$slots.default[0];
    const domProps = Object.assign({
      value: this.value,
      someProp: 'foobar',
      test: "asdf",
      class: defaultSlot.data.staticClass
    }, defaultSlot.data.attrs);
    return createElement(
      defaultSlot.tag, // tag name
      {
        attrs: domProps,
        props: domProps,
        on: {
          input: (event) => {
            this.value = event.target.value
            this.$emit('input', event.target.value)
          }
        }
      }
    )
  },
  props: {
    name: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    }
  }
})

new Vue({
  el: "#app",
  data() {
    return {
      name: "Your Name",
      age: 5
    }
  }
});

.red {
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  Hello, {{name}}!! You are {{age}} years old.
  <br/>
  <my-input v-model="name">
    <input customProp="myCustomProp"></input>
  </my-input>

  <my-input v-model="age">
    <input type="number" required class="red" custom="otherCustom"></input>
  </my-input>

</div>

이 경우 현재 컨텍스트를 사용하여 래핑된 Vue 구성 요소에 속성이 아닌 모든 항목을 적용해야 합니다.

이것은 선택 분야나 유사한 콘텐츠 등 당신의 요구를 모두 충족시킬 수 있도록 조정되어야 할 것입니다만, 좋은 시작이라고 생각합니다.

언급URL : https://stackoverflow.com/questions/48245689/adding-vee-validate-html-attributes-to-input-element-in-slot