v-for 即使变量已分配给它的对象数组也不工作

Question

                    <tbody>
                        <tr v-for="invoice in invoices">
                            <td>Holder</td>
                            <td>{{invoice.firstname}} {{invoice.lastname}}</td>
                            <td>{{invoice.telephone}}</td>
                            <td>{{invoice.email}}</td>
                            <td>{{invoice.payment_adress_1}} {{payment_country}} {{payment_postcode}}</td>
                            <td>{{invoice.shipping_address}} {{shipping_country}} {{shipping_postcode}}</td>
                            <td>{{invoice.comment}}</td>
                            <td>Holder</td>
                            <td>{{invoice.payment_method}}</td>
                            <td>Holder</td>
                            <td>Holder</td>
                            <td>Holder</td>
                        </tr>
                    </tbody>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    invoices: []
                }
            },
            methods: {
                OnLoad() {
                    axios.post('invoiceConfig.php', {
                        request: 3
                    })
                    .then(function(response){
                        console.log(response.data)
                        this.invoices = response.data
                        console.log(this.invoices)
                    })
                    .catch(function(error){
                        console.log(error);
                    });
                }
            },
            beforeMount(){
                this.OnLoad()
            }
        })
        const vm = app.mount('#app');

invoiceConfig.php 用于从数据库中提取数据，出于某种原因，当控制台记录响应时，会看到一个对象数组，但是当尝试 v-for 将行添加到 table 对应于列表中的对象数量，它根本不起作用。有人知道为什么吗？

Answer 1

使用 computed

进行同样的尝试

 <tbody>
   <tr v-for="(invoice, index) in getInvoices" :key="index"> <!-- Change added in this line -->
                            <td>Holder</td>
                            <td>{{invoice.firstname}} {{invoice.lastname}}</td>
                            <td>{{invoice.telephone}}</td>
                            <td>{{invoice.email}}</td>
                            <td>{{invoice.payment_adress_1}} {{payment_country}} {{payment_postcode}}</td>
                            <td>{{invoice.shipping_address}} {{shipping_country}} {{shipping_postcode}}</td>
                            <td>{{invoice.comment}}</td>
                            <td>Holder</td>
                            <td>{{invoice.payment_method}}</td>
                            <td>Holder</td>
                            <td>Holder</td>
                            <td>Holder</td>
  </tr>
</tbody>
<script>
        const app = Vue.createApp({
            data() {
                return {
                    invoices: []
                }
            },
            // change added below
            computed: {
             getInvoices() {
               return this.invoices.length ? this.invoices : [];
             }
            },
            methods: {
                OnLoad() {
                    axios.post('invoiceConfig.php', {
                        request: 3
                    })
                    .then(function(response){
                        console.log(response.data)
                        this.invoices = response.data
                        console.log(this.invoices)
                    })
                    .catch(function(error){
                        console.log(error);
                    });
                }
            },
            created(){ // change added
                this.OnLoad();
            }
        })
        const vm = app.mount('#app');

Answer 2

好吧，我不知道它是如何工作的，但是，在 OnLoad() 方法中将 .then(function(response)... 更改为 .then(response)=>... 修复了它。我猜这个在内部函数中无法识别？我按照本指南解决了它：，第一个答案！

Answer 3

理想情况下，您的代码应该可以工作，我刚刚创建了一个下面的代码片段，通过添加一些时间来查看 beforeMount() 是否在一段时间后绑定 DOM 中的数据，但它是正在工作。

您在控制台中遇到任何错误吗？您能否尝试一些 dummy/mock 响应来调试实际的根本原因。

演示 :

new Vue({
  el: '#app',
  data: {
    invoices: []
  },
  beforeMount() {
    this.OnLoad();
  },
  methods: {
    OnLoad() {
      setTimeout(() => {
        this.invoices = [{
          id: 1,
          name: 'Invoice 1'
        }, {
          id: 2,
          name: 'Invoice 2'
        }, {
          id: 3,
          name: 'Invoice 3'
        }]
      }, 2000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
  <thead>
    <th>ID</th>
    <th>Name</th>
  </thead>
  <tbody>
    <tr v-for="invoice in invoices" :key="invoice.id">
      <td>{{ invoice.id }}</td>
      <td>{{ invoice.name }}</td>
    </tr>
  </tbody>
  </table>
</div>

v-for 即使变量已分配给它的对象数组也不工作

v-for not working even when variable has object array assigned to it

php

vue.js