Question

我将核心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标签内调用函数？

Answer 1

在这种情况下应该使用过滤器：

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

在模板中：

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

Answer 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;
    }
 }
}

在vue js组件内调用函数

2 个答案: