編輯列表中的記錄，並用VueJS動態定義兒童屬性

Question

使用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> 

所以基本上，我所缺少的是如何在列表中的元素，以編輯它們。

我該如何動態定義子組件（文本編輯器）的屬性。

Answer 1

你可以用scoped slots和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上編輯的模型，因此需要使用範圍內的插槽。範圍插槽允許您將數據從封閉範圍傳遞到包含的組件。