Vue.js: 문이 참인지 확인란 설정

Vue.js: 문이 참인지 확인란 설정

예전 핸들바 뷰에 다음과 같은 확인란이 있었다.

<div class="form-group">
    <input type='checkbox' name='xmlOnline[]' value="stepstone" class='' {{#if (ifIn 'stepstone' job.xmlOnline)}} checked="checked" {{/if}}> Stepstone
    <input type='checkbox' name='xmlOnline[]' value="karriere" class='' {{#if (ifIn 'karriere' job.xmlOnline)}} checked="checked" {{/if}}> Karriere
</div>

따라서 job.xmlOnline에 "stepstone" 값이 있으면 체크 표시가 있어야 한다.'카리에르'도 마찬가지다.

지금 나는 POST 폼을 위해 Vue.js에서 같은 것을 성취하려고 노력하고 있다.http://t2w-api.herokuapp.com/jobs/590c20d42b1c4300046bb1b9은 "job"이라는 물체를 이렇게 표현한다.

그래서 그것은 "카리에르", "스텝스톤" 또는 "null"을 둘 다 포함할 수 있다.

지금까지 내 컴포넌트에 대해 알아낸 것은

<div v-for="(xml, index) in job.xmlOnline">
    <input type="checkbox" :checked="xml == 'stepstone'"> Stepstone {{ index }}
    <input type="checkbox" :checked="xml == 'karriere'"> Karriere {{ index }}
</div>

체크박스는 확인되지만, 나는 그것들을 중복해서 가지고 있다.나 또한 v-model을 추가하는 방법을 모른다.

이것이 내 구성품의 근원이다."https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobEdit.vue"/"responsibility"와 유사한 작업을 수행했는가: https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobEdit.vue

가능한 해결책

<input type="checkbox" 
       :checked="job.xmlOnline && job.xmlOnline.includes('stepstone')"
       @change="onChange('stepstone', $event)"> Stepstone
<input type="checkbox" 
       :checked="job.xmlOnline && job.xmlOnline.includes('karriere')"
       @change="onChange('karriere', $event)"> Karriere

그리고 onChange 방법

methods:{
  onChange(value, $event){
    if (!this.job.xmlOnline)
      this.job.xmlOnline = []

    const index = this.job.xmlOnline.findIndex(v => v == value) 
    const checked = $event.target.checked

    if (checked && index < 0)
      this.job.xmlOnline.push(value)
    if (!checked && index >= 0)
      this.job.xmlOnline.splice(index, 1)
  }
}

예.

라고 문자 그대로 묶으면 된다.

:true-value="1" 

예상대로 잘 될 거야

<b-form-checkbox class="col-sm-1 small" :value="1" switch v-model="user.nameb" :state="Boolean(user.nameb)" name="checkbox-validation">
    <b-form-invalid-feedback v-show="!Boolean(user.nameb)" :state="Boolean(user.nameb)">Not Verified</b-form-invalid-feedback>
    <b-form-valid-feedback v-show="Boolean(user.nameb)" :state="Boolean(user.nameb)">Verified</b-form-valid-feedback>
</b-form-checkbox>

<input type="checkbox" class="form-check-input" :value="party.status" 
@change="updateStatus"
 :checked="party.status == 1 ? true: false"
 id="status" name="status"/>

구성 요소 방법 및

updateStatus(e){
            if(e.target.checked){
                store.commit('updateStatus', 1);
            } else {
                store.commit('updateStatus', 0);
            }
    },

참조URL: https://stackoverflow.com/questions/43982779/vue-js-set-checkboxes-checked-if-statement-is-true