Slot HTML find Key

Support
1

I need my table slot to display a specific image from a url from an array of records. The record would be
at monuments.proofs.urlfromresponse when monuments.proofs.Front = “Shape”

"monuments": [{
	"proofs": [{
            "Front": "Front",
            "urlfromresponse": "https://cdn.filestackcontent.com/7sfQtscfgrfFO0SbsJ98",
            "version": "Current"
        }, {
            "Front": "Shape",
            "urlfromresponse": "https://cdn.filestackcontent.com/7sfQt2hcsdcfFO0SbsJ98",
            "version": "Current"
        },{
            "Front": "Back",
            "urlfromresponse": "https://cdn.filestackcontent.com/7sfQt2hRzu4O0SbsJ98",
            "version": "Current"
        },{
            "Front": "Other",
            "urlfromresponse": "https://cdn.filestackcontent.com/7sfQt25ty7RrfFO0SbsJ98",
            "version": "Current"
        },{
            "Front": "Back",
            "urlfromresponse": "https://cdn.filestackcontent.com/7sfQbm75rFO0SbsJ98",
            "version": "Rejected"
        }]
}]


Slot:

<div class="w-12 h-12">
    <img v-for="shape in _.filter(model.monuments.proofs , function record=>{ return record.Front ==='Shape'" :src="shape.urlfromresponse" />
</div>
2

From Chat GPT verbatum:

There seems to be a syntax error in your code. Here’s the corrected version:

<div class="w-12 h-12">
  <img v-for="shape in _.filter(model.monuments[0].proofs, function(record) { return record.Front === 'Shape'; })" :src="shape.urlfromresponse" />
</div>

Explanation:

  • Use model.monuments[0].proofs to access the array of proofs inside the first monuments object.
  • Use function(record) { return record.Front === 'Shape'; } as the filter function to only get the objects with Front equal to “Shape”.
  • Use :src="shape.urlfromresponse" to set the src attribute of the img element to the URL from the filtered object. Note the use of : before src, which tells Vue to bind the attribute to the value of the expression.
3

I changed model.monuments[0].proofs to row.proofs. There was a parent array here, I just didnt want to bloat the message. Its working. Thanks.