Editing record within list, with dynamically defining children properties with VueJS

Viewed 1355

With VueJS, I am trying to create a generic component that would work with different types of records.

For instance, let's say I have user records:

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

And group records

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

I want to create a Vue component to edit those records, so it can be defined as such:

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

Right now, what I have is:

(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>

So basically, what I am missing is how to bin to the elements in the list to edit them.

And how can I dynamically define properties for the sub components (text-editor).

1 Answers
Related