在列表中编辑记录，并使用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绑定，主要是因为对于输入元素来说，email地址是无效的id。基本上，我更新了您的text-editor以使用v-model，它将替代您的property绑定。需要作用域插槽，因为您正在定义要在record-editor上编辑的模型。作用域插槽允许您将数据从封闭作用域传递到所包含的组件。