Editing an entry in a list dynamically defining child properties with VueJS
With VueJS, I am trying to create a generic component that will work with different post types.
For example, 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 these posts, 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, I have:
(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 the items in the list to edit them.
And how can I dynamically define properties for subcomponents (text editor).
source to share
You can do what you want with scoped and v-model
. Here's a working example.
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>
I removed the label and id that you did in a text editor, primarily because the email address is an invalid id for the input element. Essentially I've updated yours text-editor
to work with v-model
, which will replace your binding property
. A scoped slot is required because you are defining the model you want to change to record-editor
. A scoped slot allows you to transfer data from the enclosing scope to the contained components.
source to share