vue this.formData[index]；index是取的动态值，应该怎么写

在Vue.js中，如果你想要通过动态索引`index`访问数组`formData`中的元素，你可以将`index`作为变量并在模板中使用`v-bind`或点语法结合计算属性来实现。这里有几个选项：

1. 使用`v-bind`指令：

<template>
  <div v-for="(item, index) in formData" :key="index">
    {{ this.formData[index] }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: [], // 你的数据数组
    };
  },
};
</script>

在这个例子中，`this.formData[index]`会在每次循环迭代中更新。

2. 使用点语法和计算属性：

<template>
  <div>{{ itemValue }}</div>
</template>

<script>
export default {
  data() {
    return {
      formData: [],
    };
  },
  computed: {
    itemValue(index) {
      return this.formData[index];
    }
  },
};
</script>

在这里，你需要在模板里引用`itemValue`而不是直接使用索引。

相关问题

var data={ before:(onSuccess)=>{//加载之前 if(page){ this.formData.page=page; } //在下面加入自定义代码 if(this.formData.beginDate){ this.formData.beginDate=this.formData.beginDate.format("yyyy-MM-dd"); } if(this.formData.endDate){ this.formData.endDate=this.formData.endDate.format("yyyy-MM-dd"); } this.formData.outTitle=[]; for(var i=2;i<this.tableColumns.length;++i){ var item={ fieldName:this.tableColumns[i].key, headName:this.tableColumns[i].title } //处理图片 if(item.fieldName && item.fieldName.indexOf("render")>-1){ item.fieldName=item.fieldName.replace("render",""); } this.formData.outTitle.push(item); } this.formData.operatorCode=parent.vue.formData.staffCode; this.formData.operatorName=parent.vue.formData.staffName; console.log(this.formData); //在上面加入正定义代码 onSuccess(); }, execute:(onSuccess)=>{//加载数据 const msg = this.$Message.loading({ content: "正在导出数据...", duration: 0 }); goodsInOut.outExcel(this.formData, (result) => { msg(); onSuccess(result); }, (result)=> { msg(); this.$Message.error(result); }); }, after:(data)=>{//加载数据之后 for (let i = 0; i < rows.length; ++i) { let AttrName = this.getWxAttrName(top.vue.wxAttrList, rows[i]); if(AttrName){ rows[i].wxAttr = AttrName; } } console.log(data); this.$Message.success("导出成功"); location.href=config.downloadUrl + data.values; //在下面加入自定义代码 //console.log("mountMend.queryList:" + JSON.stringify(this.formData)) }, }

这段代码定义了一个名为`data`的对象，包含了三个属性：`before`、`execute`和`after`。这些属性是函数，分别在不同的阶段执行。

`before`函数在加载数据之前执行。它首先检查是否有一个`page`参数，并将其赋值给`this.formData.page`。然后，它对`this.formData.beginDate`和`this.formData.endDate`进行格式化处理，将其转换为"yyyy-MM-dd"的格式。接下来，它清空`this.formData.outTitle`数组，并根据`this.tableColumns`数组的内容，构建一个包含字段名和标题的对象，并将其添加到`this.formData.outTitle`数组中。最后，它设置`this.formData.operatorCode`和`this.formData.operatorName`的值，并使用`console.log(this.formData)`打印出`this.formData`的内容。

`execute`函数在加载数据时执行。它首先显示一个正在导出数据的提示消息，并调用`goodsInOut.outExcel`方法导出数据。如果导出成功，它调用`onSuccess`函数并传递导出的结果；如果导出失败，它显示一个错误消息。

`after`函数在加载数据之后执行。它遍历`rows`数组，并根据条件为每个元素设置一个名为`wxAttr`的属性。然后，它使用`console.log(data)`打印出`data`的内容。接下来，它显示一个导出成功的提示消息，并使用`location.href`将页面重定向到`config.downloadUrl + data.values`，实现文件的下载功能。

请注意，这段代码中还有一些注释，其中包含了一些可能是自定义代码的提示，但是具体的实现并没有给出。

<script> import {mapGetters} from 'vuex' export default { name: "index", data() { return { formData: { userName: "", password: "" } } }, computed: { ...mapGetters([ "getUserList" ]) }, methods: { login() { if (!this.formData.userName) { this.$message.warning("用户名不能为空") return false; } if (!this.formData.password) { this.$message.warning("密码不能为空") return false; } let loginUser = this.getLoginUser(this.formData.userName); if (!loginUser || loginUser.password != this.formData.password) { this.$message.warning("用户名或密码错误") return false; } localStorage.setItem("loginUser", JSON.stringify(loginUser)) localStorage.setItem("token", new Date().getTime() + "") this.$router.push({ name: 'main' }) }, getLoginUser(userName) { let userList = this.getUserList; for (let index = 0; index < userList.length; index++) { let user = userList[index]; if (userName == user.userName) { return user; } } return null; } } } </script>

这是一个Vue.js组件的脚本部分，其中：

1. `import {mapGetters} from 'vuex'` 引入了 `vuex` 库中的 `mapGetters` 方法，用于映射 `store` 中的 `getter` 函数到本组件的计算属性上。

2. `export default { ... }` 将该组件导出为默认模块，其中包含了组件的名称、数据、计算属性和方法。

3. `data()` 是一个Vue.js中的选项，用于定义组件的数据对象。该组件包含了一个 `formData` 对象，其中包含了用户名和密码的属性。

4. `computed` 是一个Vue.js中的选项，用于定义组件的计算属性。通过 `mapGetters` 方法，将 `getUserList` 函数映射到计算属性上。

5. `methods` 是一个Vue.js中的选项，用于定义组件的方法。该组件包含了一个 `login` 方法，用于处理用户点击登录按钮的事件。该方法会进行用户名和密码的校验，并将登录用户信息存储到本地存储中。如果校验成功，则通过路由跳转到主页面。

6. `getLoginUser` 是该组件的一个自定义方法，用于根据用户名获取用户信息。该方法会遍历 `userList` 列表，查找与输入用户名匹配的用户信息并返回。如果没有找到，则返回 `null`。