如何在侧模板标签中调用 vue.js 方法并显示方法返回数据

Question

我正在使用 laravel 和 Vue.js 开发 Web 应用程序，而且我是这些框架的新手。 现在我需要在 vue 组件中调用方法并显示它返回数据，在 v-for 循环旁边我尝试了几种方法，但不能；无法获得满足我要求的正确方法

我的 IsAvaiabaleRefund() 是这样工作的，

当组件 crate 阶段加载数据并将其显示在表中时，然后它在加载时调用 IsAvaiabaleRefund() 函数并传递发票数据并返回它并显示表，因此我可以在创建派系中调用

我把我的组件代码放在这里

              <tbody>
                <tr div v-for="invoices in invoice">
                  <th scope="row">{{invoices.p_id}}</th>
                  <td>{{invoices.p_amount}}</td>
                  <td>{{invoices.p_qty}}</td>      
                  <td>{{invoices.p_amount}}</td>
                  <td>
                    <!-- here i need call method and and print its data:  -->
                    {{IsAvaiabaleRefund(invoices.p_id,'002') }}         
                  </td> 
                </tr>             
              </tbody>

这是我的脚本

    export default{        

        data(){
            return {
                invoice:{},         
            }
        },

        methods:{

          IsAvaiabaleRefund(p_id,incoice_id){    // <----
            axios.get('/check-refund-data/'+p_id+'/'+incoice_id)
           .then(function (response) {
            console.log(response.data);
            this.refund = response.data;      
           })
          }
        },

        created(){
            axios.get('/refund-data/002').then(response => {
            this.invoice = response.data.invoice
            console.log(response.data.invoice);     
            })

            .catch(error => {
            console.log(error);
            })
        }
    }

任何人有办法解决这个问题请建议我，谢谢

Answer 1

如果您需要在 Vue 组件中提取数据，您可以在 Vue 实例生命周期的开始（onCreate、created、mounted 等）执行此操作，然后更改自此以来已经存在的实例的属性（ data中的键）实例的启动。

              <tbody>
                <tr div v-for="invoices in invoice">
                  <th scope="row">{{invoices.p_id}}</th>
                  <td>{{invoices.p_amount}}</td>
                  <td>{{invoices.p_qty}}</td>      
                  <td>{{invoices.p_amount}}</td>
                  <td>
                    <!-- here i need call method and and print its data:  -->
                    {{refund}}         
                  </td> 
                </tr>             
              </tbody>

脚本

    export default{        

        data(){
            return {
                invoice:{},
                refund: "" // data not pulled yet
            }
        },

        methods:{

          IsAvaiabaleRefund(p_id,incoice_id){
            axios.get('/check-refund-data/'+p_id+'/'+incoice_id)
           .then(function (response) {
            console.log(response.data);
            this.refund = response.data;      
           })
          }
        },

        created(){


            axios.get('/refund-data/002').then(response => {
            this.invoice = response.data.invoice
            console.log(response.data.invoice);
            IsAvaiabaleRefund(invoices.p_id,'002')
            })

            .catch(error => {
            console.log(error);
            })
        }
    }