33 lines
840 B
Vue
33 lines
840 B
Vue
<template>
|
|
<div class="mobile-common-query">
|
|
<el-select
|
|
v-model="foodStore.queryRecipe.name"
|
|
filterable clearable
|
|
placeholder="请选择菜谱名称"
|
|
@change="changeFoodNameEvent">
|
|
<el-option
|
|
v-for="(item, index) in foodStore.foodNameList"
|
|
:key="index" :label="item" :value="item"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useFoodStore } from '@/store/food.ts'
|
|
import { onMounted } from 'vue'
|
|
import { searchFoodRecipeApi } from '@/apis/food.ts'
|
|
|
|
const foodStore = useFoodStore()
|
|
|
|
onMounted(async () => {
|
|
await foodStore.queryFoodNameList()
|
|
foodStore.queryRecipe.name = ''
|
|
})
|
|
|
|
const changeFoodNameEvent = async (value: string) => {
|
|
const result = await searchFoodRecipeApi(value)
|
|
foodStore.foodRecipeList = [result]
|
|
}
|
|
</script>
|