Javascript VueJS从查询参数添加数据

我正在开发一个小型的纯客户端VueJS应用程序，它使用

VueRouter

在数据输入应用程序时更新URL，这样用户可以使用URL刷新页面，并在刷新页面时将数据重新加载到应用程序中。数据存储在查询参数中，例如：

…/app.html#/？time=300&time=300&distance=300&distance=300&unit=m&unit=m

数据会根据

路由器的需要进行解析，但是当我将数据添加到空的
性能
数组中时，标记中的
：class
属性会引发

TypeError:无法读取未定义的属性“length”

其中
未定义
是
性能
数组。通过从应用程序的标记中删除
：class
，并成功呈现站点，我已将此问题缩小到
v-for
性能循环中的
：class
属性。我猜
性能
数据数组尚未传递给
：类

我在文档中没有看到任何提到这种类型的路由。数据应该如何从URL查询参数传递到应用程序中？以下是我的相关代码（为了简洁起见进行了压缩）：

HTML文件

...
<div v-for="(performance, index) in performances" :class="{'card-list': performances.length > 1 }">
...
</div>
...

紧接着是：

vue.js:427 TypeError: Cannot read property 'length' of undefined(…)
logError @ vue.js:427

看起来您可能在代码中的某个地方将其设置为数组以外的其他内容。您将其实例化为数组，并且.length仅对数组和字符串有效，因此如果将其设置为对象、json或其他任何内容，它将出错。Vue.nextTick有一个回调函数，除非将其设置为与Vue.nextTick函数在同一范围内的变量，否则该回调函数不会将“this”带入其中。差不多

var self = this;

//inside nextTick

self.performances.push(performance);

但是我认为您不应该使用nextTick，因为nextTick会在DOM重新呈现后更新。push（）函数将触发dom重新呈现，这将使页面响应。如果您等待nextTick，则在您更改其他内容之前，它可能永远不会更新

<div v-if="performances.length" v-for="(performance, index) in performances" 
:class="performances.length > 1 ? 'card-list' : ''">
...
</div>


...

v-if属性将确保在内容出现之前不会渲染

这会解决你的问题

您还可以执行{performance}来找出对象中的确切内容，Google chrome有一个vue调试器扩展。它向您显示所有数据属性的活动模型。我建议您使用它。
我建议您制作一个组件，并通过应用程序将其包括在内，而不是尝试在应用程序中制作这些方法。结果表明，我遇到了一个不同的问题。在另一行（当然我忽略了这一行），我有一行
：class=“{'hide'：performance.label.length==0，…}
，其中标签未在我的路由器中定义。取出标签后，我的代码按预期工作。我会将您的答案标记为正确，因为如果我将
性能
数组设置为数组以外的其他值，它将是我问题的正确答案。我刚刚验证了这一点，以确保它已修复。感谢您的帮助。当然，谢谢！
var self = this;

//inside nextTick

self.performances.push(performance);

<div v-if="performances.length" v-for="(performance, index) in performances" 
:class="performances.length > 1 ? 'card-list' : ''">
...
</div>