vue.js 对数据状态调用方法

thigvfpy 于 2023-04-21 发布在 Vue.js

关注(0)|答案(2)|浏览(131)

我需要在数据初始状态下调用自定义方法。
我定义了一个Mixin，然后调用我的方法：

const myMixin = {
 methods: {
   fillBrandsDropDownList() {
     return Nova.request().get('/nova-vendor/export/brands-list').then(response => {
        let brandNames = response.data.map(function (obj) {
          return {
            brand_name: obj.name,
          }
        });
      });
   }
 }
}

export default {
   mixins: [myMixin],
   data: function () {
     return {
       filter: null,
       brandNames: this.fillBrandsDropDownList(),
     };
   }
}

但是，该列表不会填充

<ul>
   <li v-for="item in brandNames">
      {{ item.brand_name }}
   </li>
</ul>

我在Laravel Nova组件中使用vue.js。

vue.js

来源：https://stackoverflow.com/questions/76028356/call-method-on-data-state

2条答案

按热度按时间

rdrgkggo1#

您需要在map info之后返回'brandNames'。
注意：你也可以在组件挂载（）之前的created（）钩子中调用这个方法。这对于在初始化模板之前获得响应很有用。
祝你好运

赞(0）回复(0）举报 2023-04-21

rjee0c152#

我找到了解决方案，错误是API调用需要promise响应，为此我创建了一个“async”方法，在将数据传递给列表之前等待数据返回

export default {
  data: function () {
    return {
      filter: null,
      brandNames: null,
    };
  },
  created() {
   this.fetchBrandNames()
 },
 methods: {
   async fetchBrandNames() {
     const response = await Nova.request().get('/nova-vendor/export/brands-list');
     this.brandNames = response.data;
   }
 }
}

赞(0）回复(0）举报 2023-04-21

我来回答

vue.js 对数据状态调用方法

2条答案

相关问题

热门标签

最新问答