Vue.js在动态组件中编辑变量 [英] Vue.js edit variables in dynamic components

问题描述

我想列出一个对象.(列表中的)每个元素都由一个子组件可视化.我的目标是创建一个动态列表，在其中可以编辑元素.

I would like to make an object list. Each element (of the list) is visualised by a child component. My goal is to create a dynamical list, where I can edit the elements.

我有一个父组件< contacts-list-form> ，其中有一系列联系人，并以< contact-element-form> 动态地向他们展示:

I have a parent component <contacts-list-form> what has an array of contacts an show me them dynamically in <contact-element-form>:

<contact-element-form v-for="contact in contacts" :key="contact.id" :contact="contact"></contact-element-form>

contact-element-form看起来像这样:

contact-element-form looks like this:

<template lang="html">
  <md-card>
    <md-card-header>
      <div class="md-title">Contact</div>
        <md-icon @click="removeMyself">remove</md-icon>
    </md-card-header>
      <md-card-content>
        <md-input-container>
          <md-icon>person</md-icon>
          <label>contactName</label>
          <md-input name="contactName" v-model="contact.name" required />
        </md-input-container>

        <md-input-container>
          <md-icon>email</md-icon>
          <label>contactEmail</label>
          <md-input name="contactEmail" v-model="contact.email" required />
        </md-input-container>

        <md-input-container>
          <md-icon>phone</md-icon>
          <label>contactPhoneNumber</label>
          <md-input name="contactPhoneNumber" v-model="contact.phoneNumber" required />
        </md-input-container>
    </md-card-content>
  </md-card>
</template>

<script>
export default {
  props: ["contact"],
  data() {
    return {
      contact: {},
    }
  },
  methods: {
    removeMyself() {
      console.debug(this.contact.id + ". id will be removed.");
      // it will emits to its parent.
    }
  },
  create() {}
}
</script>

<style lang="css">
</style>

我如何才能确定每个< contact-element-form> 的数据都是可编辑的，而父级(< contacts-list-form> )是注意到这一点，并将修改发送到服务器.

How can I reach that data of every <contact-element-form> is editable, and the parent (<contacts-list-form>) is noticed about that, and sends the modification to the server.

感谢您的回答，并提前提出建议！

Thanks for the answers, and advises in advance!

推荐答案

为了遵守单向数据流，这是实现所需内容的一种方法:

To honor the one-way data flow, this is one way to implement what you're looking for:

• 父母将道具传递给孩子
• 父级注册v-on:childUpdate ="parentUpdate"事件监听器
• 在子项上进行突变时，子项$ em发出childUpdate事件，将新值传递给父项
• 每当孩子调用childUpdate时，父母就会执行parentUpdate
• 父级将数据发送到服务器，而不发送
• 父级更新其自身的状态以表示更改
• 传递给孩子的道具现在会自动更新，因为数据有一天会流传

描述的最后一部分很重要:孩子不进行本地修改，而是通过向父级及其负责更新联系方式的父级发送事件和新值来进行修改.由于联系人是传递给孩子的道具，因此孩子的状态会自动更新.

The last part of the description is important: the child doesn't make local modifications but the modification happens by emitting the event and the new value to the parent and the parent it responsible for updating the contact details. As the contact is a prop that's been passed to the child, the child's state updates automatically.

这里有一个示例 https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

另一种方法是使用v-model，该模型可以从链接部分下面的文档中找到.

Another would be to use v-model which may be found from the documentation below the linked part.

这篇关于Vue.js在动态组件中编辑变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！