Aquí está mi código:
<ul> <li v-for="value in RandomTopic" :key="value.id">{{ value.title }}</li> </ul> export default { data() { return { RandomTopic: null } }, mounted() { ///some method to get data from remote server console.log(res.data); this.RandomTopic = res.data; } }Quiero renderizar todos los datos del servidor remoto en el front-end. Sin embargo, después de ejecutar el programa, informa este error:
Cannot set property 'RandomTopic' of undefined ; at api request success callback function TypeError: Cannot set property 'RandomTopic' of undefined El console.log(res.data); registre el JSON con éxito, por lo que parece que no es un problema de AJAX o del servidor remoto.
Y también, aquí hay una muestra del JSON:
[ { "id": 421, "title": "sample1", "image_url": "bus.png" }, { "id": 535, "title": "sample78", "image_url": "car.png" } ]¿Qué pasa con mi código? Soy un principiante de Vue 3, por favor ayúdenme.
Según el error que mencionó, el problema está básicamente relacionado con el alcance de this archivo . Parece que está utilizando una función regular en lugar de una función de flecha ( => {...}) que no proporciona su propio enlace (retiene este valor del contexto léxico adjunto).
Referencia - Función de flecha
.then(res => { this.RandomTopic = res.data; })