큰 양식의 VueJS

20 개 이상의 필드가있는 거대한 양식이 있습니다. 나는 지금 내가 쓰는 코드에 너무 많은 중복성을 느낀다. 가장 좋은 방법은 무엇입니까?큰 양식의 VueJS

<script> 
new Vue({ 
    data : { 
     user : { 
      first_name : "", 
      last_name : "", 
      username : "", 
      and 20+......... 
     } 
    } 
}); 
</script> 

<form> 
    <input name="first_name" v-model="first_name"> 
    <input name="last_name" v-model="last_name"> 
    <input name="username" v-model="username"> 
    and 20+......... input fields 
</form>

나는 이것이 좋을 것이라고 느낍니다. 사용자 개체가 동적으로 생성됩니다 .. 가능합니까?

<script> 
new Vue({ 
    data : { 
     user : Object 
    } 
}); 
</script> 

<form v-model="user"> 
    <input name="first_name"> 
    <input name="last_name"> 
    <input name="username"> 
    and 20+......... input fields 
</form>

은 사전에 감사

출처

2016-08-25 shakee93

당신은 사용자 정의 지시어를 만들 수 있지만, 모든 입력에'V-model'을 결합 할 수 있어야합니다, 그리고 뷰가 제공하지 않는 것 프로그래밍 방식으로 지시문을 바인딩하는 방법 –

내 모듈 vue-formation을 사용할 수 있습니다. – vbranden

오래된 질문이지만 Vue 2에 대한 답을 업데이트했습니다. –

-1

어떻게

data: { 
    fields: { name: {v:''}, surname: {v:''}, ... } 
}

및

<input v-for="(val, prop) in fields" :name="prop" v-model="val.v" />

어떻습니까?

https://jsfiddle.net/gurghet/dhdxqwjv/1/

출처

2016-08-26 08:14:21 gurghet

이것은 포스터에서 요구 한 것과 반대입니다. DOM을 만드는 데이터 대신 DOM은 데이터를 생성하기를 원합니다. –

하지만 적어도 엔지니어링과 엔지니어링 모두 가능합니다. – gurghet

-1

는 뷰에서 완전히 재실행 2

당신의 접근 방식은 당신이보기에 데이터 구조를 배치하고 뷰가 데리러 갖고 싶어, 일반적인 뷰 방식의 역입니다 데이터에 배치하고 Vue로 렌더링하는 것이 아니라 당신이 원하는 맞춤형 레이아웃을 가지고 있다면 이것이 바람직한 방법을 알 수 있습니다.

비 전통적 솔루션은 비 전통적인 솔루션을 필요로하므로이 방법은 비 통상적입니다. 특히, 하위 구성 요소가 상위의 데이터를 수정하는 것이 일반적으로 권장되지 않습니다.

그렇다면 접근 방식은 폼 입력을 슬롯으로, 부모 개체를 받침으로 받아 들일 수있는 구성 요소를 만드는 것입니다. mounted에서는 $set

는

가에 input 이벤트 리스너를 추가 새로 만든 멤버에 시계를 설정하여, name 속성과

와 모든 input 필드를 얻을 부모 개체의 멤버를 작성합니다 양방향 바인딩 완료

양식 자체를보다 다양하게 만들려면 구성 요소에 더 많은 소품을 추가하는 것이 좋겠지 만 이는 기능성을 제공합니다. 찾고있어. 원칙적으로

Vue.component('autoBindingForm', { 
 
    template: '<form><slot></slot></form>', 
 
    props: ['createIn'], 
 
    mounted() { 
 
    const inputs = this.$el.querySelectorAll('input[name]'); 
 

 
    for (const i of inputs) { 
 
     this.$set(this.createIn, i.name, i.value); 
 
     this.$watch(`createIn.${i.name}`, (newVal, oldVal) => { 
 
     i.value = newVal; 
 
     }); 
 
     i.addEventListener('input', (e) => { 
 
     this.createIn[i.name] = i.value; 
 
     }); 
 
    } 
 
    } 
 
}); 
 

 
const vm = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    user: {} 
 
    } 
 
}); 
 

 
// Testing that binding works both ways 
 
setTimeout(() => { 
 
    vm.user.last_name = 'Set it'; 
 
}, 800);

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <auto-binding-form :create-in="user"> 
 
    <input name="first_name" value="hi"> 
 
    <input name="last_name"> 
 
    <input name="username"> 
 
    <div>{{Object.keys(user)}}</div> 
 
    <div>{{Object.values(user)}}</div> 
 
    </auto-binding-form> 
 
</div>

출처

2016-08-26 13:30:21

큰 양식의 VueJS

답변

관련 문제