Question

所以我试图将来自表单输入的keyup数据推入表中。这是您在下面看到的“阈值”变量。

这是表结构和Vue代码：

<table v-if="threshold > 0 || date2 != ''" class="table">
   <thead>
      <tr>
         <th scope="col">ID</th>
         <th scope="col">Full Name</th>
         <th scope="col">Paypal Email</th>
         <th scope="col">Amount</th>
         <th scope="col">Currency</th>
         <th scope="col">Status</th>
      </tr>
   </thead>
   <tbody>
      <tr v-for="item in response_data">
         <th>{{ response_data }}</th>
         <td>{{ item.vendor_name }}</td>
         <td>{{ item.paypal_email }}</td>
         <td>{{ item.amount }}</td>
         <td>{{ item.currency }}</td>
         <td>{{ item.commission_status }}</td>
      </tr>
   </tbody>
</table>

要提取和显示数据的另一个条件是选择了日期范围。

您可以在下面的Vue代码中查看其工作原理：

var datepickerOptions = {
      sundayFirst: true
    }
    // install plugin
    Vue.use(window.AirbnbStyleDatepicker, datepickerOptions)

    var vm = new Vue({
      el: '#app',
      data: {
        date1: '',
        date2: '',
        threshold: '',
        res_num: 0,
        response_data: ''
      },
      methods: {
        get_results: function() {
            vm.searchcall();
        },
        searchcall: function () {

            let form_data = new FormData;
                form_data.append('action', 'payments_rt_search');
                form_data.append('date1', this.date1);
                form_data.append('date2', this.date2);
                form_data.append('threshold', this.threshold);

                axios.post(ajaxurl, form_data).then(function(response){
                console.log(response.data);
                response_data = response.data;
                res_num = response_data.count;
            });

        }
      },
    })

我的问题是，尽管数据是在正确的时间插入的，并且它是正确的数据，但是没有数据通过for循环被推送到表中。

我想知道这里是否可能缺少某些东西，希望能得到一些帮助。

干杯！

Answer 1

您无需更改组件数据的response_data，而只需更改全局变量response_data。尝试分配vm.response_data和vm.res_。如果要使用this.resposne_data而不是vm.response_data，则需要将then的回调更改为es6箭头函数，如下所示：

axios.post(ajaxurl, form_data).then(response => {
   console.log(response.data);
   this.response_data = response.data;
   this.res_num = response_data.count;
 });

Answer 2

您要在此处分配全局变量：

            response_data = response.data;

它应该是成员变量：

            this.response_data = response.data;

尝试在Vue中创建反应式表，但事件调用未显示任何内容

2 个答案: