Недавно я взял Vue.js и Mongoose для разработки личного проекта, в основном для отслеживания количества ингредиентов в наличии в определенной онлайн-игре.
Разные блюда требуют разных ингредиентов. Lotus Seed - Bird Egg soup, Jewelry Soup
и Jade Parcels
требуют разного количества Lotus Head
в качестве ингредиентов.
Я обновляю количество ингредиентов, используя updateOne
в коллекции ингредиентов.
К сожалению, я изначально встроил ингредиенты в продукты / блюда, что я понял проблематично. в последнее время, потому что вы буквально просто считаете ингредиенты, которые у вас есть на данный момент.
Теперь пищевой документ выглядит так
{
"_id" : ObjectId("5fca4ada32195d5814510242"),
"foodName" : "Lotus Seed and Bird Egg Soup",
"onHandQty" : 20,
"ingredients" : [
"5fca481432195d581451023f",
"5fca483932195d5814510240",
"5fca48a232195d5814510241"
]
}
Я читал о Mongoose's populate()
и тестировал вывод одной еды/блюда. К сожалению, после того, как вы попробовали этот код, из интерфейса Vue.js
ничего не выходит.
сервер/модели/Food.js
const { Router } = require('express');
const FoodItem = require('../../models/Food');
const IngredientItem = require('../../models/Ingredient');
const router = Router()
router.get('/', async(req, res) =>{
try {
const food = await FoodItem.findOne({
foodName: 'Lotus Seed and Bird Egg Soup'
}).populate('ingredients').
exec(function (err, food) {
if (err) return handleError(err);
console.info('The food is %s', food.foodName);
});
res.send(food);
} catch (error) {
res.status(500).json({
message: error.message
})
}
});
module.exports = router
Часть компонента, где отображаются ингредиенты
клиент/SRC/компоненты/Food.vue
<div class = "tile is-ancestor">
<div class = "tile">
<div class = "tile is-parent">
<div class = "tile is-child box">
<template v-if = "food.ingredients">
<div class = "ingredients-block">
<p>Ingredients List:</p>
<ul class = "ingredients-list">
<li class = "row" v-for = "ingredient in food.ingredients" :key = "ingredient._id">
<div id = "ingredient-image-container">
<img class = "image is-64x64" :src = "require(`../assets/images/food_inv/${ingredient.imagePath}.png`)" alt = "ingredient.ingredientName" :title = "ingredient._id">
{{ingredient.ingredientName}}
</div>
<div class = "required-qty-container">
<!-- <i class = "material-icons" id = "required-inner-qty">food_bank</i> -->
Required:
{{ ingredient.requiredQty }}
</div>
<div class = "on-hand-qty-container">
<p>On Hand:</p>
<input v-if = "ingredient.onHandQty < ingredient.requiredQty" class = "input is-danger on-hand-input" type = "number" v-model = "ingredient.onHandQty" min = "0">
<input v-else class = "input is-primary on-hand-input" type = "number" v-model = "ingredient.onHandQty" min = "0">
<!-- <button class = "button is-primary save-button" @click = "test({ingredient_id: ingredient._id, onhandqty: ingredient.onHandQty})"><i class = "material-icons">save</i></button> -->
<button class = "button is-primary save-button" @click = "$emit('update-qtys', {ingredient_id: ingredient._id, onhandqty: ingredient.onHandQty})"><i class = "material-icons">save</i></button>
</div>
</li>
</ul>
</div>
</template>
</div>
</div>
</div>
</div>
Весь проект на Github: Food Inventory
Быстрые исправления,
const foodSchema = new mongoose.Schema(
{
foodName: String,
imagePath: String,
effect: String,
onHandQty: Number,
// correct this to array
ingredients: [{
type: mongoose.Schema.Types.ObjectId,
ref: 'Ingredient'
}]
}
);
res.send(food)
или res.json(food)
) из функции вызова exec,router.get('/', async(req, res) =>{
try {
await FoodItem.find()
.populate('ingredients')
.exec(function (err, food) {
if (err) return handleError(err);
console.info('The food is %s', food);
// put response here
res.json(food);
});
} catch (error) {
res.status(500).json({ message: error.message })
}
});
router.get('/', async(req, res) =>{
try {
const food = await FoodItem.find()
.populate('ingredients')
.exec();
res.json(food);
} catch (error) {
res.status(500).json({ message: error.message })
}
});
я думаю, вы только что добавили код на стороне клиента в свой репозиторий, я скоро проверю и обновлю вас.
я также протестировал код на стороне сервера, после исправления я добавил ответ, поэтому, вероятно, есть какая-то проблема на стороне клиента. я проверю и обновлю вас.
Да, я только что увидел сегодня, что файлов клиента там нет, поэтому я исправил свое локальное репо, чтобы отправить его. Не торопись
Я проверил, ошибка только в том, что поле imagePath
не найдено в базе данных, добавьте это поле в обе коллекции (еда и ингредиенты), после этого ошибка будет устранена.
О, я вижу, помимо этого, в imagePath также есть несовпадающие имена. Я действительно многому научился на этом. Спасибо миллион человек!
Привет спасибо за ответ. К сожалению, нет никакого вывода, исходящего от компонента. Но временно, когда часть
const food = await FoodItem.findOne({ ... })
меняется наconst food = await FoodItem.find()
, компонент еды перечисляет все продукты из базы данных. Я хотел бы спросить, есть ли что-то не так с моим кодом вclient/src/components/Food.vue
части<ul class = "ingredients-list"><li class = "row" v-for = "ingredient in food.ingredients" :key = "ingredient._id">
Недостаточно ли точечной нотации в части v-for?