Vue.js中能否在v-for循环内调用函数？附代码示例

当然可以在Vue的v-for循环里调用函数，但你的代码里藏着一个关键问题——你的bar方法是异步的，这会导致<option>无法正确渲染出预期的选项。让我一步步给你拆解问题和解决方案：

为什么你的当前写法不生效？ #

bar方法里使用了this.$http.get发起网络请求，这是一个异步操作。当v-for尝试遍历bar(stbc.arg1, stbc.arg2)的返回值时，函数会立即返回一个Promise（而非你需要的选项数组），v-for无法遍历Promise，所以一开始不会渲染任何选项。即便后续请求完成，因为没有触发组件的响应式更新，选项也不会自动出现。

更糟的是，每次组件重新渲染时，这个异步函数都会被重复调用，导致大量不必要的网络请求，严重影响性能。

正确的解决方案 #

方案一：提前缓存所有需要的选项数据 #

在组件初始化时，提前遍历你的data数组，为每个stbc请求对应的选项并缓存起来，后续v-for直接使用缓存好的数据：

<template>
  <div v-for="(stbc, index) in data" :key="stbc.id"> <!-- 优先用唯一标识当key，别用index -->
    <select>
      <!-- 用缓存的数据，没有加载完时显示空数组避免报错 -->
      <option v-for="foo in optionsCache[`${stbc.arg1}-${stbc.arg2}`] || []" 
              :value="foo" 
              :key="foo">
        {{ foo }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    Configuration: { required: true }
  },
  data() {
    return {
      optionsCache: {} // 缓存每个stbc对应的选项
    }
  },
  computed: {
    data() {
      return this.Configuration.something 
        .filter(stbc => stbc.val !== "no");
    }
  },
  async created() {
    // 初始化时批量请求并缓存数据
    for (const stbc of this.data) {
      const cacheKey = `${stbc.arg1}-${stbc.arg2}`;
      // 避免重复请求
      if (!this.optionsCache[cacheKey]) {
        const response = await this.$http.get(`server_url?arg1=${stbc.arg1}&arg2=${stbc.arg2}`);
        this.optionsCache[cacheKey] = response.data;
      }
    }
  },
  methods: {
    // 可以保留这个方法，用来手动刷新某一组选项
    async refreshOptions(arg1, arg2) {
      const cacheKey = `${arg1}-${arg2}`;
      const response = await this.$http.get(`server_url?arg1=${arg1}&arg2=${arg2}`);
      this.optionsCache[cacheKey] = response.data;
    }
  }
}
</script>

方案二：封装独立的异步选择器组件 #

把每个选择器的异步逻辑封装成单独的组件，让每个组件独立管理自己的选项数据，更符合Vue的组件化思想：

<!-- AsyncSelect.vue -->
<template>
  <select>
    <option v-for="foo in options" :value="foo" :key="foo">
      {{ foo }}
    </option>
  </select>
</template>

<script>
export default {
  props: {
    arg1: { required: true },
    arg2: { required: true }
  },
  data() {
    return {
      options: []
    }
  },
  async mounted() {
    // 组件挂载后自己请求数据
    const response = await this.$http.get(`server_url?arg1=${this.arg1}&arg2=${this.arg2}`);
    this.options = response.data;
  }
}
</script>

然后在父组件中使用：

<template>
  <div v-for="(stbc, index) in data" :key="stbc.id">
    <async-select :arg1="stbc.arg1" :arg2="stbc.arg2"></async-select>
  </div>
</template>

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

export default {
  components: { AsyncSelect },
  props: {
    Configuration: { required: true }
  },
  computed: {
    data() {
      return this.Configuration.something 
        .filter(stbc => stbc.val !== "no");
    }
  }
}
</script>

额外注意事项 #

• 如果你的函数是同步计算（比如只是对参数做纯逻辑处理，没有异步操作），那直接在v-for里调用完全没问题，比如v-for="foo in syncBar(stbc.arg1)"。
• 永远不要用index作为v-for的唯一key（除非你的数组永远不会变化），尽量用每个项的唯一标识（比如id），避免触发不必要的DOM重渲染。
• 异步场景下一定要做缓存，避免重复请求，提升性能和用户体验。

内容的提问来源于stack exchange，提问作者Morgan Le Floc'h