vue动态表单分页显示

一个容器里面有多个组件输入框，点击个数，遍历出相同的容器，要让每个容器绑定的值不同

不知道你这个问题是否已经解决, 如果还没有解决的话:

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7796408
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue多个路由共用一个页面，路由传参不同，页面显示数据不同，并重新加载数据
除此之外, 这篇博客: Vue异步执行接口请求，解决数据获取不到就去加载的问题中的 页面调用定义的全局方法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

在全局中定义好方法以后去页面中调用此方法

	async onLoad(e) {
		// 页面中执行这个请求方法  也可以传值URL链址
		await this.$visitStore();//同步执行这个方法
	}

请求方法成功后，在异步请求的成功回调后执行store.commit('systeminfo',res)，就是将获取到的数据赋值到vuex。

您还可以看一下徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的什么是单页面应用及实现前端路由的基本原理小节, 巩固相关知识点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

创建一个父组件，作为容器组件，用于管理表单的分页显示。
在父组件的数据中，定义一个数组来存储每个容器的值，例如containerValues。
使用v-for指令在父组件中渲染多个容器组件，并使用v-model指令将每个容器的值与containerValues中的对应项进行绑定。
在容器组件中，定义一个单独的值，例如inputValue，作为当前容器的输入框的值。
使用v-model指令将输入框的值与inputValue进行绑定。
在父组件中，通过点击事件或其他方式，获取到要遍历的容器的索引，例如selectedContainerIndex。
在父组件中，通过selectedContainerIndex来访问containerValues中对应索引的值，即可获取到所选容器的值。

以下是一个简单的示例代码：

<!-- 父组件 -->
<template>
  <div>
    <div v-for="(container, index) in containers" :key="index">
      <child-component v-model="containerValues[index]"></child-component>
    </div>
    <button @click="getSelectedContainerValues">获取选中容器的值</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      containers: [1, 2, 3], // 假设有三个容器
      containerValues: [], // 用于存储每个容器的值
      selectedContainerIndex: 0, // 被选中的容器索引
    };
  },
  methods: {
    getSelectedContainerValues() {
      const selectedContainerValue = this.containerValues[this.selectedContainerIndex];
      console.log('选中容器的值:', selectedContainerValue);
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <input type="text" v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
};
</script>

在上述示例中，父组件中的containers数组存储了三个容器的信息，containerValues数组用于存储每个容器的值。通过v-for指令渲染了三个子组件，并使用v-model指令将每个容器的值与containerValues中对应索引的项进行绑定。在子组件中，定义了inputValue作为当前容器的输入框的值，通过v-model指令与输入框进行绑定。在父组件中，通过点击事件获取到要遍历的容器的索引selectedContainerIndex，并根据索引访问containerValues数组，从而获取到所选容器的值。

这样就实现了动态表单分页显示，并且每个容器绑定的值都是不同的。希望对你有帮助！如有需要，请随时提问。