Vue.js 当v-for中的子对象发生更改时，如何更新数据对象

如何在v-for内部发生更改时更新父对象的数据对象。我在父组件中使用了一个子组件

ParentComponent.vue

   <template>
       ....
       ....
    <child-component
      v-for="i in count"
      ref="childComponent"
      :key="i"
      currentPage="i"  // currentPage doesn't update.
      :page="i"
    />

      <q-header>
        {{currentPage}}  // always displays default value:1
      </q-header>

   </template>

    <script>
      data () {
         return {
            pageCount: 10,
            currentPage: 1,
          }

....
....
您应该查看自定义事件


其思想是，只要在子组件中有一些您想要的更新，您就可以执行
this.$emit（“change”）
，这将抛出一个事件

在父端，您可以通过作为属性之一的
@change=“myMethod”
捕获此事件


方法：{
myMethod（）{
控制台日志（“测试”）
}
}
对于
v-for
如何处理
子组件，这里有一些轻微的混淆。将
currentPage=“i”
作为属性写入（实际上应该是
v-bind:currentPage
，以便将
i
解释为JS）只需在每个
子组件上声明属性

当我在v-for内更改时，如何更新数据对象的currentPage

i
在普通JavaScript应用程序内运行for循环的传统上下文中不会“改变”。在Vue中，渲染逻辑和应用程序逻辑是分开的，这是正确的，因为将逻辑作为渲染的一部分运行实际上没有意义

例如，让我们看看你的应用程序将如何呈现
子组件
：



因此，让我们看看如何将渲染逻辑与应用程序逻辑分离

我意识到您没有访问子组件的权限，但基于上下文，我将假定它是某种选项卡功能（基于您尝试设置“当前页面”的值-请随意更具体，我可以更新我的答案）

我们需要在呈现逻辑和应用程序逻辑之间架起桥梁，我们可以通过使用事件来实现这一点：



您可能需要使用不同的事件，而不是
单击
，但我希望这能让您更接近您想要实现的目标。要更新
currentPage
的值，必须有某种用户输入，因此只需找出哪个事件最有意义。可能您正在使用的
子组件
库具有更合适的自定义事件。
currentPage=“i”
正在将字符串“i”传递到属性中。使用
：currentPage=“i”
代替感谢@MichalLevý的快速响应。我仍然没有看到当前页面得到更新。该值始终保持为1，这是默认值。它需要有关子组件实际执行操作的更多信息。你想达到什么目的？像这样没有多大意义。您将经历一个从1到10的循环，因此最终将得到10个子组件，每个子组件的局部范围“i”值从1到10。看起来您只想将i赋值给currentPage，但不能一次应用10个不同的值。一定有什么变化事件牵涉其中。q-header的作用是什么？我正在尝试捕获“I”的值，以便更新属于父组件的工具栏中的值。e、 g.当我5岁时，我想在工具栏中显示5。您何时何地更改
currentPage
的值？谢谢您的回复。我无法访问子组件，因为它是我通过npm安装的组件。您准确地找到了问题。加载页面时，子组件不会多次呈现。我在Vue开发工具中观察到，如果
count
为10，则有10个子组件具有10个不同的键。子组件为我可以用来更改当前页面值的每个页面呈现“页面加载”事件。我的用例是，当我在子组件上滚动时，我想更新关于我在哪个子组件上的工具栏。e、 g.如果我有10个子组件并滚动到子组件5，我想在工具栏上显示第5页。工具栏属于父工具栏。