Soy nuevo en Vue, así que trato de entender los conceptos básicos hasta ahora. Estoy usando Vue 3.
Mi intención es:
Es en esta etapa final que ocurre el error, específicamente la línea getGeneMutationData: () => this.queryConstraints.push({
Error:
Uncaught TypeError: Cannot read properties of undefined (reading 'queryConstraints') at Proxy.getGeneMutationData (Query.vue?12c2:46:14) at eval (runtime-dom.esm-bundler.js?3191:380:1) at callWithErrorHandling (runtime-core.esm-bundler.js?a261:155:1) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?a261:164:1) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?a261:174:1) at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?3191:366:39)No estoy seguro de por qué esto no funciona, según la documentación, no estoy seguro de qué es diferente en los enfoques:
data() { return { count: 4 } }, methods: { increment() { // `this` will refer to the component instance this.count++ } }Aquí hay una minimización de mi código:
<template> <select v-model="selectedGeneMutation"> <option v-for="geneMutation in geneMutations" :key="geneMutation">{{geneMutation}}</option> </select> <input type="button" @click="getGeneMutationData">Get results</input> </template> <script> export default { name: 'Home', data: () => ({ geneMutations: ['ACTC', 'MYBPC3' ], queryConstraints: [], selectedGeneMutation: '' }), setup() {}, methods: { getGeneMutationData: () => this.queryConstraints.push({ fieldPath: this.selectedGeneMutation, opStr: '==', value: true }) } }; </script>Cualquier ayuda sobre por qué no puedo acceder a las propiedades en 'datos' sería realmente apreciada
Está utilizando una función de flecha . Es limitado y no tiene su propio enlace a this , por eso falla su método. La documentación a la que se refiere utiliza una expresión de función tradicional.
Así que en tu caso prueba esto:
getGeneMutationData: function () { this.queryConstraints.push({ fieldPath: this.selectedGeneMutation, opStr: "==", value: true, }); EDITAR: En realidad, la respuesta de Nikola Pavicevic es correcta. Sí, usar una expresión de función tradicional resuelve su problema, sin embargo, parece que mezclar la composición y la API de opciones (o más bien no entender la diferencia entre los dos) es lo que causó el problema en primer lugar. En Vue 3, cuando usa la API de composición , no está usando this archivo . El método setup() devuelve un objeto y todas sus propiedades se exponen al resto del componente.
No debe mezclar la composición y la API de opciones ( this no es lo mismo, además, no hay métodos en la API de composición), intente seguir el siguiente fragmento (API de composición) o puede mover sus métodos a la API de opciones (eliminar la función setup ):
const { ref } = Vue const App = { setup() { const geneMutations = ref(['ACTC', 'MYBPC3']) let queryConstraints = ref([]) const selectedGeneMutation = ref('') const getGeneMutationData = () => { queryConstraints.value.push({ fieldPath: selectedGeneMutation.value, opStr: '==', value: true }) } return { geneMutations, queryConstraints, selectedGeneMutation, getGeneMutationData }; } } Vue.createApp(App) .mount('#app') <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> <div id="app"> <select v-model="selectedGeneMutation"> <option v-for="geneMutation in geneMutations" :key="geneMutation">{{geneMutation}}</option> </select> <input type="button" @click="getGeneMutationData" value="Get results" /> <h3>{{ queryConstraints }}</h3> </div>