Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How the I select the first in an array within a Vue computed property?

I am trying to use a computed property to filter out a specific answer so that I can then use v-if to display this content if it is true, but my answer has an array in it, it only ever has 1 item in the array which is the document I want to run the computed property on.

<script>
import getCollection from '../Composables/getCollection';
import getUser from '../Composables/getUser';
import { computed } from "vue"
export default {
    props: ['id'],
setup(props) {
    
    
 

    
    const { user } = getUser()
    const { documents: Subscribed } = getCollection(
      'Subscribed', 
      ['userId', '==', user.value.uid]
    )
        console.log(Subscribed)
        let Purchased1 = computed(() => Subscribed._rawValue.Purchased1 == 'Purchased1');
return { Subscribed, Purchased1, user, document }
}
}
</script>

The above is my code running the computed property but there is an Array after raw value as you can see below from the console log.
enter image description here

Here is my getCollection code as well

import { ref, watchEffect } from 'vue'
import { projectFirestore } from '../firebase/config'

const getCollection = (collection, query) => {

  const documents = ref(null)
  const error = ref(null)

  // register the firestore collection reference
  let collectionRef = projectFirestore.collection(collection)
    .orderBy('createdAt')

  if (query) {
    collectionRef = collectionRef.where(...query)
  }

  const unsub = collectionRef.onSnapshot(snap => {
    let results = []
    snap.docs.forEach(doc => {
      // must wait for the server to create the timestamp & send it back
      doc.data().createdAt && results.push({...doc.data(), id: doc.id})
    });
    
    // update values
    documents.value = results
    error.value = null
  }, err => {
    console.log(err.message)
    documents.value = null
    error.value = 'could not fetch the data'
  })

  watchEffect((onInvalidate) => {
    onInvalidate(() => unsub());
  });

  return { error, documents }
}

export default getCollection

This returns me the subscribed back at the start.

So far I have tried putting the array after _rawvalue like this _raw.value.[0].Purchase1
_raw.value[0].Purchase1 and have not been able to get the raw value any other way than the above methods, normally for this sort of thing I just go

let Purchase1 = computed(() => document._rawValue.Purchase1 == 'Purchase1');

and it works just fine.
If anyone has any ideas or solutions that would be great thanks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Hi I found a solution by going into the getCollection code and at the end of results I just changed it from documents.value = results to documents.value = results[0].

    import { ref, watchEffect } from 'vue'
import { projectFirestore } from '../firebase/config'

const getCollection = (collection, query) => {

  const documents = ref(null)
  const error = ref(null)

  // register the firestore collection reference
  let collectionRef = projectFirestore.collection(collection)
    .orderBy('createdAt')

  if (query) {
    collectionRef = collectionRef.where(...query)
  }

  const unsub = collectionRef.onSnapshot(snap => {
    let results = []
    snap.docs.forEach(doc => {
      // must wait for the server to create the timestamp & send it back
      doc.data().createdAt && results.push({...doc.data(), id: doc.id})
    });
    
    // update values
    documents.value = results[0] // I changed results to results[0] selecting the first object in the array.
    error.value = null
  }, err => {
    console.log(err.message)
    documents.value = null
    error.value = 'could not fetch the data'
  })

  watchEffect((onInvalidate) => {
    onInvalidate(() => unsub());
  });

  return { error, documents }
}

export default getCollection

    This got it to work the way I wanted it to and I am able to filter out the documents with the wrong answers, the only downside is I am still getting this error enter image description here

    This is weird because it obviously isn't reading it as null because it is filtering out the wrong responses correctly so I can only assume it is something else.


  2. 0

    Your {documents: Subscribed} is a ref null | []. So try:

    let Purchased1 = computed(() => Subscribed.value?.filter(s => s.Purchased1 === 'Purchased1') ?? []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search