Accessing object properties in Vue after loading in Sails app - vue.js

Question

When the SailsJS app loads a page, I have it pulling the id parameter from the url and loading a recipe from the database. The recipe object logs to console correctly, so I'm sure it's loading, but none of the Vue variables are rendering.
I'm loading the data in this controller action:
// api/controllers/recipes/view-single-recipe.js
module.exports = {
friendlyName: 'View single recipe',
description: 'Display "Single recipe" page.',
exits: {
success: {
viewTemplatePath: 'pages/recipes/single-recipe'
}
},
fn: async function (inputs, exits) {
const recipe = await Recipe.find({id: this.req.params.id}).populate('ingredients')
console.log(recipe) //logs the data correctly
return exits.success({
recipe: recipe
});
}
};
Then I'm atteming to access the recipe object in my view using VueJS:
<!-- views/pages/recipes/single-recipe.ejs -->
<div id="single-recipe" v-cloak>
<h1>{{recipe.name}}</h1> <!-- rendering as <h1></h1>
<!-- ... more stuff ... -->
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
Here's the data object that loads:
[{
ingredients: [
[Object],
[Object],
[Object],
[Object],
[Object]
],
createdAt: 1536016866419,
updatedAt: 1536016866419,
id: '5b8c169936f1df3439fa39c7',
name: 'Sweet Green',
ratingSweet: 2,
ratingTexture: 5,
ratingOverall: 4,
ratingColor: 5,
notes: 'Personal favorite, maybe needs more ginger',
owner: '5b8c16301cee97343513e184'
}]
Not sure if it matters, but here is the route:
'GET /recipes/single-recipe/:id': { action: 'recipes/view-single-recipe' }
And the URL being access is http://localhost:1337/recipes/single-recipe/5b8c169936f1df3439fa39c7
How do I access the data object properties in the view?

Answer 1

You should use findOne
// api/controllers/recipes/view-single-recipe.js
module.exports = {
friendlyName: 'View single recipe',
description: 'Display "Single recipe" page.',
exits: {
success: {
viewTemplatePath: 'pages/recipes/single-recipe'
}
},
fn: async function (inputs, exits) {
const recipe = await Recipe.findOne({
id: this.req.params.id
}).populate('ingredients')
return exits.success({ recipe: recipe });
}
};
Also note that inputs variable in fn are not being used.
And there need to be some handler if record is not exists.

Answer 2

The answer is that when using find() query, the results returned are an array. So if there is only one result, it needs to be accessed at the first result in the array [0]
// api/controllers/recipes/view-single-recipe.js
module.exports = {
// ...
fn: async function (inputs, exits) {
const recipe = await Recipe.find({id: this.req.params.id}).populate('ingredients')
console.log(recipe) //logs the data correctly
return exits.success({
recipe: recipe[0]
});
}
};