Question

我使用Laravel作为api，在视图中传递了对象（订单）的集合（订单）。我不明白为什么我无法通过vue.js中的简单方法访问变量。

    props: ['orders'],
    mounted() {
        console.log('Component mounted.');
    },
    data() {
        return {
            select: [],
            selected: 'csv',
            options: [
                { text: 'Export CSV', value: 'csv' },
                { text: 'Factures PDF', value: 'pdf' },
                { text: 'Changer de status', value: 'status' },
            ],
            status: '1',
            orders: this.orders,
        }
    },

    methods: {
      submit() {
        if (this.selected == 'csv') {
          // faire csv
        } else if (this.selected == 'pdf'){
          // faire pdf
        } else {
            for (order in this.orders) {
              console.log(order.id);
            }

            axios.post('/api/admin/commandes/change-status',{
              newStatus:this.status,
              select:this.select
            }).then(function (response) {
              console.log(response);
            })
        }
      }
    },

error : [Vue warn]: Error in v-on handler: "ReferenceError: orders is not defined"

问题只在于for..in，因为我可以在视图中显示订单。

Answer 1

道具，数据属性和计算属性都必须具有唯一的名称。通常通过this.blah（其中blah是名称）来访问这三个文件，因此，如果您有两个同名文件，则很难引用正确的一个。

在您的情况下，您有一个名为orders的道具和一个名为orders的数据属性。如果两者都需要，则它们将需要具有不同的名称，但是如果它们仅具有相同的值，则无需两者都具有。根据您发布的代码，您似乎只需要prop即可删除data属性。

没有一个可以真正解释您报告的错误消息，但这是您应该解决的问题，然后再继续进行操作。

此行有两个问题：

for (order in this.orders)

首先，您需要var，let或const来声明order，否则它将最终成为全局变量。我建议const，除非您有充分的理由使用其他东西。

我相信这可以解释您在标题中发布的错误消息。

第二，使用for / in将遍历对象/数组的键。 order不太可能是您想要的，因为它将是属性名称/索引，而不是值本身。假设您尝试访问order.id，我想您是想改用for / of吗？

我很难解释会导致您发布第二条错误消息的原因。最初我以为可能是因为this.orders是undefined，但我不认为这会在您发布的代码中引起这样的消息。

[Vue警告]：v-on处理程序中的错误：“ ReferenceError：分配给未声明的变量顺序”

1 个答案: