将对象或对象键传递给 VueJs 中的组件

Question

我有一个绑定到来自 VueJs 的对象数组的人员表。表格的最后一列是用于编辑每条记录的按钮。

我想在单击编辑按钮时显示一个模式弹出窗口，并将文本框绑定到我要编辑的人员的属性。当单击模式弹出窗口上的保存按钮时，它应该更新表格和数据源。

但我坚持传递对象，甚至只是传递组件的键，因此我可以加载数据或将编辑的对象绑定到我的文本框中。

JS

var app = new Vue({
  el: '#my-app',
  data: {
    personnels: [
      {
        id: 1,
        firstName: 'Billy',
        lastName: 'Bob',
        email: 'bb@kewl.com'
      },
      {
        id: 2,
        firstName: 'Mike',
        lastName: 'Coilers',
        email: 'mco@kewl.com'
      },
      {
        id: 3,
        firstName: 'Fred',
        lastName: 'Just',
        email: 'freju@gmail.com'
      },
      {
        id: 4,
        firstName: 'Tori',
        lastName: 'Drury',
        email: 'smstua@gmail.com'
      }
    ]
  },
  methods: {
    showPersonnelEditor: function () {
      // how do i pass data to the personnelEditor component?
    }
  }
});

Vue.component('personnel-editor', {
  prop: ['personnel']
});

HTML

<div id="my-app">
    <table classs="table" width="100%">
        <tr>
            <th>
                Id
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Email
            </th>
            <th>
                Actions
            </th>
        </tr>
        <tr v-for="personnel in personnels">
            <td>
                {{ personnel.id }}
            </td>
            <td>
                {{ personnel.firstName }}
            </td>
            <td>
                {{ personnel.lastName }}
            </td>
            <td>
                {{ personnel.email }}
            </td>
            <td>
                <button v-on:click="showPersonnelEditor">Edit</button>
            </td>
        </tr>
    </table>


    <personnel-editor inline-template><div class="modal fade" >
        <div class="modal-dialog">
            <div class="modal-header">
                header
            </div>
            <div class="modal-content">
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Id</label>
                        <input type="text" v-model="personnel.Id" />
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-12">
                            <label>First Name</label>
                            <input type="text" v-model="personnel.firstName" />
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Last Name</label>
                        <input type="text" v-model="personnel.lastName" />
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>Email</label>
                        <input type="text" v-model="personnel.Email" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                oh mah foot
            </div>
        </div>
    </div>
</div></personnel-editor>

Answer 1

你可以试试：

<button v-on:click="showPersonnelEditor(personnel)">Edit</button>

然后在 showPersonnelEditor 方法中：

showPersonnelEditor: function (personnel) {
  this.selectedPersonnel = personnel; //make sure to declare selectedPersonnel in data
}

最后在您的 html 模板中：

<personnel-editor inline-template :personnel=selectedPersonnel><div class="modal fade" >

热它有帮助。

编辑绑定模态结果：

您可以在模式关闭时发出一个事件，可以使用按钮或任何其他关闭事件，具体取决于您的实现。 这是一个用于发出 en 事件的代码示例：

        whenModalClosedMethod() {
            this.$emit('personnel-edited', personnel);
        }

然后在你的模板中：

<personnel-editor inline-template :personnel=selectedPersonnel v-on:personnel-edited="updatePersonnel">

然后在你的根组件中添加一个方法：

updatePersonnel: function(personnel) {
   //look for the correct entry by id in your personnels array and update it
}