Estoy creando una aplicación de tarjetas didácticas para mi diccionario de inglés/chino en Vue 3 y cuando el usuario hace clic en un botón, quiero que se muestre el siguiente elemento en la pantalla desde la matriz de tarjetas didácticas importadas.
Sin tener que iterar a través de la matriz con un bucle for y pausar la iteración hasta que el usuario haga clic en un botón, simplemente quiero tomar el elemento de la matriz por su índice estableciendo un conteo:
<script> import flashcards from '../flashcards/flashcards.json'; export default { data() { return { count: 0, currentTranslation: { chinese: flashcards[this.count].traditional, }, } }, methods: { correctClickHandler() { this.setNextTranslation() }, incorrectClickHandler() { this.setNextTranslation() }, setNextTranslation() { this.count++ } } } </script>Cuando se llama a uno de los controladores de clics, el recuento debe incrementarse en uno y luego debe mostrarse el siguiente elemento en la matriz de tarjetas.
Hacer referencia this.count como un índice de matriz devuelve un error indefinido:
Uncaught TypeError: Cannot read properties of undefined (reading 'traditional') ¿Por qué flashcards[this.count].traditional no es lo mismo que flashcards[0].traditional cuando this.count ya se ha establecido en 0?
this no es lo que crees que es dentro data . Para ser específicos, no es una referencia a la instancia actual de Vue, lo cual es cierto para methods o funciones computed . Es la función de data this y, por lo tanto, ninguna de las propiedades o métodos de la instancia están disponibles en ella.
En su caso, para conservar la dependencia de currentTranslation en this.count , debe calcularse:
<script> import flashcards from '../flashcards/flashcards.json'; export default { data() { return { count: 0 } }, computed: { currentTranslation() { return flashcards[this.count].traditional } }, methods: { correctClickHandler() { this.setNextTranslation() }, incorrectClickHandler() { this.setNextTranslation() }, setNextTranslation() { this.count++ } } } </script>en this.data , es probable que this.count aún no esté configurado en el momento en que intenta hacer referencia a él en this.currentTranslation.chinese . Lo que quiero decir con esto es que si define un objeto, la propiedad no se establece cuando todavía está en la fase de "creación". Por lo tanto, no puede hacer referencia al objeto en sí mismo en ese paso para reutilizar las propiedades que definió arriba de su propiedad actual.
obj = { a: 1, b: obj.a + 1 }esto te dará
Error de referencia no capturado: obj no está definido
Tendrías que hacer esto:
obj = { a: 1, } obj.b = obj.a + 1En Vue puedes usar una propiedad calculada .
import flashcards from '../flashcards/flashcards.json'; export default { data() { return { count: 0, } }, methods: { correctClickHandler() { this.setNextTranslation() }, incorrectClickHandler() { this.setNextTranslation() }, setNextTranslation() { this.count++ } }, computed: { // a computed getter chineseTranslation() { return flashcards[this.count].traditional } } }