将对象从父体发射到子体

我使用的是VueJS。我有两个组件。第一个组件是第二个组件的父体,父体有一个数组保存对象,而我们通过监听子体来获取对象。父组件有一个数组保存对象,而我们通过监听子组件来获取对象。

父体有一个数组保存对象,而我们通过监听子体来获取对象。

<template>
  <div>
    Create a new item <button @click="createItem">Create Item</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      item: {
        id: null
      },
      count: 0
    }
  },
  methods: {
    createItem () {
      this.item.id = this.count
      this.count = this.count + 1
      this.$emit('setItem', this.item)
    }
  }
}
</script>

父母

<template>
  <div>
    <child @setItem="addItem"></child>
    <ul>
      <li
        v-for="item in items"
        :key="item.id">
        {{ item.id }}
      </li>
    </ul>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  data () {
    return {
      items: []
    }
  },
  methods: {
    addItem (item) {
      this.items.push(item)
    }
  },
  components: {
    child: Child
  }
}
</script>

所以你有一个按钮。如果你点击这个按钮,你就会设置这个子项目的属性。然后你发出这个项目。你在父对象中获取它,将该对象添加到数组中并渲染它。

预期的行为。每点击一次,列表就会增加一个项目 而每一个新的项目都比上一个大一个。导致列表中的数字越来越大。

实际行为:每点击一次,列表就增加一个项目,而每一个新的项目比上一个项目大一圈。每点击一次,列表就增加一项。这很好。但是所有的项目都会更新到最大最新的数字。

例如 https:/codesandbox.ioshungry-architecture-85b7d?file=srcApp.vue。

现在,我知道我可以只传递一个数字而不是一个对象,但请记住,这只是一个最小的复制。我的实际对象看起来是这样的。(如果这很重要的话)

measurement: {
  id: null,
  start: 0,
  pauses: [],
  stop: 0
}

解决方案:

你每次都在修改同一个项目。

父项目拥有对子项目的引用。只有一个,所以当你更新它时,你更新了父数组中的所有元素,因为它们引用的是同一个对象。

你有2种方法来处理这个问题。

要么在子项目中进行克隆,要么在父项目中进行克隆。

在子代中,这应该是可行的。

this.$emit('setItem', Object.assign({}, this.item))

下面是一个 实例

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何过滤对象数组的数组?

2022-9-9 1:06:20

未分类

react中的目标容器不是DOM元素

2022-9-9 1:06:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索