我有一个Vue模板问题，在该模板中，除非已经填充了在data上声明的数组，否则页面上的任何元素都不会呈现。
问题是data只有在通过提交表单进行API调用之后才被填充
浏览器控制台读取Error in render: "TypeError: Cannot read property 'response' of undefined"
如果我注释掉{{classes.data.response}}，表单将显示，但不会显示。
下面是代码的样子。
<template>
<div class="container">
<form @submit="getClass">
<input type="text" placeholder="Search..." v-model="class_id">
<button type="submit">Search</button>
</form>
<br>
<div v-if="classes"> <!-- conditionally render if array has results -->
{{classes.data.response}} <!-- form shows when this is commented out -->
</div>
</div>
</template>
数据块
data() {
return {
classes: []
};
},
...
这些方法阻碍了
methods: {
...
// Request
axios(config)
.then(response => (this.classes = response))
.catch(function (error) {
console.log('There was an error :' , error);
});
}
}
我是Vue的新手，所以如果有人能告诉我这里出了什么问题，我将不胜感激。提前谢谢！
this.classes.data.response未定义
在将响应分配给classes时，可以尝试更加具体。用this.classes = response.data.response代替this.classes = response。response.data.response是您要查找的阵列，而不是response。
methods: {
...
// Request
axios(config)
.then(response => (this.classes = response.data.response))
.catch(function (error) {
console.log('There was an error :' , error);
});
}
}
然后在模板中只写{{ classes }}而不是{{ classes.data.response }}，也写v-if="classes.length > 0"而不是只写v-if="classes"。
v-if="classes"将始终是true
当阵列中有更多的0元素时，v-if="classes.length > 0"将是true
为什么
由于API请求的异步性质，表单尝试呈现this.classes的时刻仍然是您定义的空数组。稍后，一旦API请求完成，this.classes将获得所需的数据。
空数组是真的，因此v-if="classes"将始终为真。使用classes.length，因为空数组将导致错误的0。
也许你可以做一些类似的事情
<div v-if="classes.length>0">
{{classes.data.response}}
</div>