사용자 지정 Bootstrap-Vue 확인란 구성 요소

사용자 지정 Bootstrap-Vue 확인란 구성 요소

동적 폼을 만들기 위해 구성 요소를 만들려고 하지만 확인란에 문제가 있습니다.

<template v-if="type === 'switch'">
            <b-form-checkbox
                switch
                size="lg"
                :name="name"
                :id="name"
                :ref="name"
                :value="value"
                v-on:input.native="updateValue($event.target.value)"
                >{{ value }}</b-form-checkbox
            >
        </template>

코드를 이렇게 부릅니다.

<FormRow
                type="switch"
                name="productor"
                rule="required"
                v-model="selectedCompany.productor"
            />

문제는 이 시스템이v-model내용은 변경되지 않지만 입력 필드에서는 변경됩니다.뭐가 잘못된 거죠?누가 나 좀 도와줄래?

p.s. 저는 부트스트랩-뷰와 함께 일하고 있습니다. 감사합니다!

네가 없어졌어v-model체크박스를 켜겠습니다.를 삭제합니다.value아트리뷰트와input청취자 및 용도v-model부모로부터 받은 프로펠러 값을 변형하지 않고 모델로서 우아하게 재사용할 수 있도록 계산된 세터를 사용합니다.

<b-form-checkbox
  switch
  size="lg"
  :name="name"
  :id="name"
  :ref="name"
  v-model="bvalue"
>{{ value }}
</b-form-checkbox>

computed: {
  bvalue: {
    get() { return this.value },
    set(value) { this.$emit('input', value) }
  }
}

를 삭제할 수 있습니다.updateValue메서드도 있습니다.

이 정보가 도움이 될 수도 있습니다: selected Company: {}의 상태를 설정한 스토어에서 데이터를 얻은 후 상위 컴포넌트(모달)에서 이 방법으로 필드를 그립니다.

 <FormRow
 type="switch"
 name="productor"
 rule="required"
 v-model="selectedCompany.productor"
 />

부모에서 다음 작업을 수행합니다.

 <template v-if="type === 'switch'">
     <b-form-checkbox
         switch
         size="lg"
         :name="name"
         :id="name"
         :ref="name"
         :value="value"
         :checked="value"
         v-on:change.native="updateValue($event.target.value)"
         >{{ value }}</b-form-checkbox
    >
  </template>

methods: {
    updateValue: function(value) {
        this.$emit("input", value);
    }
},

이행 파일에서는 필드 productor를 default(0)로 boolean으로 설정하고 모델에서는 이러한 방법으로 필드를 변환합니다.

 public function getProductorAttribute($value){
    return $value ? true : false;
}

이제 모든 것이 더 명확해져야 한다.

언급URL : https://stackoverflow.com/questions/66152756/custom-bootstrap-vue-checkbox-component