在 vue js 组件中调用函数答案

【问题标题】：call a function inside vue js component在 vue js 组件中调用函数
【发布时间】：2020-07-20 09:11:33
【问题描述】：

我正在使用 core ui vue.js 作为我项目的模板，我有一个包含一些数据的表。其中一个字段包含一个数字（来自另一个表的关系 id），我想调用一个函数，将数字更改为字符串

这是我的功能

<script>
import TipeKomoditi from '../../api/tipekomoditi';
import Produk from '../../api/produk';

const tipeKomoditi = new TipeKomoditi();
const produk = new Produk();

 const fields = [
  {
   key: 'tipe_komoditi_id',
   label: 'Tipe Komoditi',
   _style:'min-width:200px'
   },
   {
   key: 'komoditi_id',
   label: 'Komoditi',
   _style:'min-width:100px;' 
   },
   {
    key: 'kualitas_komoditi_id',
    label: 'Kualitas Komoditi',
    _style:'min-width:100px;' 
  },
  {
   key: 'created_at',
   label: 'Dibuat pada',
   _style:'min-width:100px;' 
 },
 {
  key: 'aksi',
  label: '',
  sorter: false,
  filter: false,
}
];


export default {
  
  name: 'Produk',
  data () {
    return {
      items: [],
      id: '',
      fields
    }
  },
 methods: {
    loadData () {
      produk.index()
      .then(res => {
        this.items = res.data.data;
      })
      .catch(err => console.log(err));
    },

    convertTipeKomoditi(item) {
      tipeKomoditi.index()
      .then(res => {
        let resData = res.data.data;
        let arrData = '';
        for (let i = 0; i < resData.length; i++) {
            if (resData[i].id === item) {
                arrData = resData[i].tipe_komoditi;
            }
        }
        console.log(arrData);
        return arrData;
      })
      .catch(err => console.log(err));
    }
 }
}
</script>

这是组件

               <CDataTable
                :items="items"
                :fields="fields"
                column-filter
                table-filter
                items-per-page-select
                :items-per-page="5"
                hover
                sorter
                pagination
            >
              <template #tipe_komoditi_id="{item}">
                <td>
                   <p>{{ convertTipeKomoditi(item.tipe_komoditi_id) }}</p>
                </td>
              </template>
            </CDataTable>

这是我导入的类

import axios from 'axios';

axios.defaults.baseURL = `http://localhost:3000/api/v1`;

export default class TipeKomoditi {
  index () {
    return axios.get('/tipekomoditi-list');
  }

  create (data) {
    return axios.post('/add-tipekomoditi', data);
  }

  update (data) {
    return axios.put('/update-tipekomoditi', data);
  }

  delete (id) {
    return axios.delete(`/delete-tipekomoditi/${id}`);
  }
}

那个 p 标记应该输出一些东西，但它在表格中没有显示任何内容，我如何在那个 p 标记中调用我的函数？

【问题讨论】：

标签： javascript vue.js core-ui

【解决方案1】：

这是应该使用过滤器的情况：

filters: {
  convertTipeKomoditi: function (value) {
     // Do stuff...
     return newValue
  }
}

在模板中：

<p>{{ item.tipe_komoditi_id | convertTipeKomoditi }}</p>

【讨论】：

【解决方案2】：

这是一个异步函数，您可以使用await 等待结果，或者在解决时更新data 字段。

第一个选项的示例：

export default {
  
  name: 'Produk',
  data () {
    return {
      items: [],
      id: '',
      fields,
      funcresult: null
    }
  },
 methods: {
    loadData () {
      produk.index()
      .then(res => {
        this.items = res.data.data;
      })
      .catch(err => console.log(err));
    },

    async convertTipeKomoditi(item) {
      let res = await tipeKomoditi.index();
      let resData = res.data.data;
      let arrData = '';
      for (let i = 0; i < resData.length; i++) {
          if (resData[i].id === item) {
              arrData = resData[i].tipe_komoditi;
          }
      }
      console.log(arrData);
      return arrData;
    }
 }
}

【讨论】：