观看Vuejs中嵌套数据的更改

发布于 2025-02-08 07:51:50 字数 451 浏览 3 评论 0原文

我想观看家庭变量的变化，其中包含

 <component-test
    v-for="family of familiesToDisplay"
    // rest
   />

data: () => ({
    families: [],
  }),

      computed: {
        familiesToDisplay() {
          return this.families.fillter(family => family.members > 4);
        },
    
      },

一些响应中的嵌套对象，我看到了一些推荐的手表使用，但是在我的情况下，我不知道如何实现它，因为我从未使用过。因此，请求是要更改家庭中的嵌套对象（作为我有一个人和工作的对象，因此，如果一个人的名称已更改或其工作已更改，则必须在此处重新删除更改）

原文

I want to watch changes of families variable which contains nested objects

 <component-test
    v-for="family of familiesToDisplay"
    // rest
   />

data: () => ({
    families: [],
  }),

      computed: {
        familiesToDisplay() {
          return this.families.fillter(family => family.members > 4);
        },
    
      },

In some response I have seen some recomanding the use of watch but in my case I didn't knew how to implement it since I have never used before.
so the request is to get changes of nested objects in families (as objects I have person and work so if a name of a person has been changed or its work has been changed changes must be retreived here)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

网名女生简单气质 2025-02-15 07:51:50

该代码应正常工作，但是，有必要在数组中正确突变对象。您需要使用this。$ set或用新对象替换对象，以触发vue重新列表列表和重新计算列表。
例如，您可以这样更改它们（完整的工作示例，您可以找到在这里）：

export default {
  name: "HelloWorld",
  components: {
    Display,
  },

  data: () => ({
    families: [
      { name: "foo-1", members: 1 },
      { name: "foo-5", members: 5 },
      { name: "bar-6", members: 6 },
      { name: "bar-3", members: 3 },
    ],
  }),

  methods: {
    onClick() {
      this.families.forEach((family) => {
        this.$set(family, "members", this.getRandomNumber());
      });
    },

    getRandomNumber() {
      return Math.floor(Math.random() * 10) + 1;
    },
  },
};

This code should work fine, however, it is necessary to correctly mutate objects inside an array. You need to use this.$set or replace the object with a new one to trigger vue re-rendering a list and recalculation of a list.
For example, you can change them like this, (full working example you can find here):

export default {
  name: "HelloWorld",
  components: {
    Display,
  },

  data: () => ({
    families: [
      { name: "foo-1", members: 1 },
      { name: "foo-5", members: 5 },
      { name: "bar-6", members: 6 },
      { name: "bar-3", members: 3 },
    ],
  }),

  methods: {
    onClick() {
      this.families.forEach((family) => {
        this.$set(family, "members", this.getRandomNumber());
      });
    },

    getRandomNumber() {
      return Math.floor(Math.random() * 10) + 1;
    },
  },
};

回复收藏 0 原文

~没有更多了~