Ok - figured this out. Somehow, my array does not like me taking what I get from the q-file and push it onto my array that I am storing. I have to take the attributes, I care about and create an object, pushing that onto my array for storage. The retrieval works perfectly.

Thanks @beets. That is what I think. I simplified this even more. Here are the steps.

( a ) Template:

   <q-file
	accept=".pdf, image/*"
	class="q-ma-xs q-mb-md col-12"
	multiple
	append
	dense
	@input="link(filesLinked)"
	label="Files"
	use-chips
	hint="Click to select files to link"
	bottom-slots
	v-model="filesLinked"
	counter>
  </q-file>

( b ) The @input function (which adds the file objects to the editedObject:

 link (files) {
  this.editedObject.filePaths = []
  files.forEach(r => {
	this.editedObject.filePaths.push(r)
  })
  console.log(this.editedObject) // to check that it has the file array added - CONFIRMED GOOD!
}

( c ) Later, I save the object to the store (when the user clicks save):

        console.log(this.editedObject) // to check what is being sent to the store -- CONFIRMED GOOD!
        this.$store.dispatch('editPortfolio', this.editedObject)
        this.$store.dispatch('loadeditPortfolio')

( d ) When re-loading the dialog with data (re-hydrating the editedObject for display):

console.log(row) // to confirm that the data in the list of editedObjects has the saved data... IT DOES NOT! There is an array of n elements (same number as what was added) but they are not file objects {name: "filename.ext", path: "...", lastModified: timestamp, size: x, type: ...} Why???
this.editedObject = Object.assign({}, portfolioObject, row)
this.receipts = []
this.editedObject.filePaths.forEach(r => {
  this.files.push(r)
})
console.log(this.files) // to confirm it is loaded (since this is the v-model for q-file)
this.editPortfolioDialog = true // show the dialog

The issue is that the data is not being saved as I would expect. Amy I saving the file array incorrectly in pushing each item onto the array of this.editedObject.filePaths?

Thank you for your help with this.

Thanks for responding @beets. I am using vuex to save the state. This is on a dialog that is saved and the entire editedObject is saved.

On a sandbox, I am not sure how to do one with vuex that would persist and the be able to be retrieved.

One looking at the data further, the only thing in the retrieved data is an empty array so I think I am not saving the data properly somehow…

Hi,

I am using q-file to allow the user to select multiple files. Once selected, the files show up but after saving the page and returning, the files are there but do not show filenames and the counter is all messed up. I am not uploading the files, only want to maintain the list and show it to the user when they return.

  <q-file
	accept=".pdf, image/*"
	multiple
	append
        use-chips
	hint="Attach files here"
	v-model="editedObject.filesArray"
	label="Files"
	counter />

Once selected:

After returning:

(the files are still in the object, I console.log it to confirm).

Thanks for looking at this question.

@beets THANK YOU! Perfect. It looks exactly as I want!! Thanks for being patient with me also.

@beets That sounds like exactly what I want but I am too new to this code to know hot to do that. When I try to check for q-expansion-item-expanded or expanded to set a conditional :class, it does not work. Could you please explain further. Sorry to be asking such newbie questions!

Is this possible… does anyone know?

@metalsadman - good idea. Thanks much for suggesting

https://codepen.io/quasy/pen/ExKZrwE

When any item is expanded, I want to have it stand out with a different, color, etc.

Hi,

I am trying to have a :class for coloring the background of an expanded item in my q-expansion-item list. So if expanded, it looks one way but if not, it looks like the rest of the items in the list.

Since this is bound to a v-for (with the items coming from a script array), v-model does not seem to be a workable path.

Thanks so much for reviewing.

Quasy

@dobbel that works!! Thanks so much!