VueJ를 사용하여 자식 속성을 동적으로 정의하여 목록 내 레코드 편집s

VueJ를 사용하여 자식 속성을 동적으로 정의하여 목록 내 레코드 편집s

VueJs에서는 다양한 유형의 레코드로 동작하는 범용 컴포넌트를 작성하려고 합니다.

예를 들어, 사용자 레코드가 있다고 합시다.

var users = [
  { UserID: 1, username: "pan",email:"peter.pan@neverland.com" },
  { UserID: 2, username: "john",email:"john.doe@somewhere.com" }
];

그리고 그룹 레코드

var groups = [
    { GroupId: 1, groupName: "Users", description: "Lorem ipsum ..." },
    { GroupId: 2, groupName: "Admins", description: "Some people with super powers" }
];

이러한 레코드를 편집하기 위한 Vue 컴포넌트를 생성하여 다음과 같이 정의합니다.

<record-editor v-bind:record="user[0]" title="Edit user">
  <text-editor label="User name" property="username"></text-editor>
  <text-editor label="Email" property="email"></text-editor>
</record-editor>

<!-- For the binding syntax, I am not sure what should 
     I use to bind to a record in the lists shown before -->

<record-editor v-bind:record="groups[0]" title="Edit group"> 
  <text-editor label="groupName" property="groupName"></text-editor>
  <text-editor label="Description" property="description"></text-editor>
</record-editor>

지금 내가 가진 건

(function() {
    var textEditor = Vue.component('text-editor', {
        template: "#text-editor",
        props: ['label', 'property']
    });

    var recordEditor= Vue.component('record-editor', {
        template: '#model-editor',
        props: ['title', 'record']
    });

    var vue = new Vue({
      el:"#someContainer",
      data: {
        users : users,
        groups: groups
      }
    })
}())

<template id="text-editor">
    <div>
        <label v-bind:for="property">{{label}}</label>

        <!-- need help figuring what to put in v-bind:value -->
        <input type="text" v-bind:name="property" 
                           v-bind:id="property"
                           v-bind:value="">
    </div>
</template>

<template id="record-editor">
    <div>
        <h2>{{title}}</h2>
        <form>
            <slot></slot>
        </form>
    </div>
</template>

기본적으로는 목록 내의 요소를 편집하기 위해 빈으로 이동하는 방법이 누락되어 있습니다.

또한 서브 컴포넌트(텍스트 에디터)의 속성을 동적으로 정의하려면 어떻게 해야 합니까?

스코프 슬롯을 사용하여 원하는 작업을 수행할 수 있습니다.v-model여기 작업 예가 있습니다.

console.clear()

var users = [
  { UserID: 1, username: "pan",email:"peter.pan@neverland.com" },
  { UserID: 2, username: "john",email:"john.doe@somewhere.com" }
];

var groups = [
    { GroupId: 1, groupName: "Users", description: "Lorem ipsum ..." },
    { GroupId: 2, groupName: "Admins", description: "Some people with super powers" }
];

var textEditor = Vue.component('text-editor', {
  template: "#text-editor",
  props: ['label', 'value'],
  computed:{
    property:{
      get(){ return this.value},
      set(v){this.$emit("input", v)}
    }
  }
});

var recordEditor= Vue.component('record-editor', {
  template: '#record-editor',
  props: ['title', 'record']
});

var vue = new Vue({
  el:"#app",
  data: {
    users : users,
    groups: groups
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <record-editor v-bind:record="users[0]" title="Edit user">
    <template scope="{record}">
    <text-editor label="User name" v-model="record.username"></text-editor>
    <text-editor label="Email" v-model="record.email"></text-editor>
  </template>
  </record-editor>
  {{users}}
</div>

<template id="text-editor">
    <div>
        <label>{{label}}</label>
        <input type="text" v-model="property">
    </div>
</template>

<template id="record-editor">
    <div>
        <h2>{{title}}</h2>
        <form>
            <slot :record="record"></slot>
        </form>
    </div>
</template>

텍스트 에디터에서 실행하던 라벨과 ID 바인딩을 삭제한 것은 주로 이메일 주소가 입력 요소의 ID가 잘못되었기 때문입니다.기본적으로 나는 당신의text-editor함께 일하다v-model이 경우, 고객님의property바인드편집하는 모델을 정의하기 위해 스코프 슬롯이 필요합니다.record-editor. 스코프 슬롯을 사용하면 동봉된 스코프에서 포함된 컴포넌트로 데이터를 전달할 수 있습니다.

언급URL : https://stackoverflow.com/questions/45152645/editing-record-within-list-with-dynamically-defining-children-properties-with-v