Vue数据初始状态调用自定义方法后列表无法渲染问题

核心问题 #

你在data里直接把fillBrandsDropDownList()的结果赋值给brandNames，但这个方法返回的是Promise异步对象，不是最终的品牌数组数据，Vue没法用v-for直接渲染Promise。另外你的fillBrandsDropDownList方法里，then回调只处理了数据但没返回，导致Promise最终拿到的是undefined。

修复步骤 #

• 初始化空数组：在data里把brandNames初始化为空数组，而不是直接调用异步方法。
• 在生命周期钩子中发起请求：用created（或mounted）钩子调用异步方法，拿到数据后再赋值给brandNames。
• 完善异步方法的返回值：确保fillBrandsDropDownList的then回调返回处理后的数组，这样外部能拿到正确数据。

修改后的代码 #

Mixin部分

const myMixin = {
  methods: {
    fillBrandsDropDownList() {
      return Nova.request().get('/nova-vendor/export/brands-list').then(response => {
        // 返回处理后的数组，让Promise的结果指向这个数组
        return response.data.map(obj => ({
          brand_name: obj.name,
        }));
      });
    }
  }
}

组件部分

export default {
  mixins: [myMixin],
  data() {
    return {
      filter: null,
      brandNames: [] // 初始化为空数组
    };
  },
  created() {
    // 在created钩子中调用异步方法，拿到数据后更新brandNames
    this.fillBrandsDropDownList().then(data => {
      this.brandNames = data;
    });
  }
}

模板优化（可选）

可以加个加载提示，避免请求未返回时页面空白：

<ul>
  <li v-if="brandNames.length === 0">加载中...</li>
  <li v-for="(item, index) in brandNames" :key="index">
    {{ item.brand_name }}
  </li>
</ul>

内容的提问来源于stack exchange，提问作者mariobros