feat(daily recipe page): [M] 增加提交按钮禁用逻辑

[M] 增加提交按钮禁用逻辑

Signed-off-by: Ching <loooching@gmail.com>
This commit is contained in:
Ching 2021-10-06 15:52:37 +08:00
parent 982df005a1
commit 07568e4337
5 changed files with 33 additions and 8 deletions

View File

@ -1 +1 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>frontend</title><link href="/css/app.0786e41a.css" rel="preload" as="style"><link href="/css/chunk-vendors.8823d44d.css" rel="preload" as="style"><link href="/js/app.3102fbaf.js" rel="preload" as="script"><link href="/js/chunk-vendors.bb844861.js" rel="preload" as="script"><link href="/css/chunk-vendors.8823d44d.css" rel="stylesheet"><link href="/css/app.0786e41a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.bb844861.js"></script><script src="/js/app.3102fbaf.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>frontend</title><link href="/css/app.0786e41a.css" rel="preload" as="style"><link href="/css/chunk-vendors.8823d44d.css" rel="preload" as="style"><link href="/js/app.06e83add.js" rel="preload" as="script"><link href="/js/chunk-vendors.bb844861.js" rel="preload" as="script"><link href="/css/chunk-vendors.8823d44d.css" rel="stylesheet"><link href="/css/app.0786e41a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.bb844861.js"></script><script src="/js/app.06e83add.js"></script></body></html>

File diff suppressed because one or more lines are too long

1
frontend/dist/js/app.06e83add.js.map vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,13 @@
<template> <template>
<el-table border :data="daily_recipe"> <el-table border :data="daily_recipe">
<el-table-column prop="meat" label="肉"> <el-table-column prop="meat" label="肉">
<el-select v-model="meat" multiple size="mini" placeholder="选个肉"> <el-select
v-model="meat"
multiple
size="mini"
placeholder="选个肉"
@change="handleChange"
>
<el-option <el-option
v-for="recipe in meat_recipe" v-for="recipe in meat_recipe"
:key="recipe.id" :key="recipe.id"
@ -12,7 +18,13 @@
</el-select> </el-select>
</el-table-column> </el-table-column>
<el-table-column prop="vegetable" label="菜"> <el-table-column prop="vegetable" label="菜">
<el-select v-model="vegetable" multiple size="mini" placeholder="选个菜"> <el-select
v-model="vegetable"
multiple
size="mini"
placeholder="选个菜"
@change="handleChange"
>
<el-option <el-option
v-for="recipe in vegetable_recipe" v-for="recipe in vegetable_recipe"
:key="recipe.id" :key="recipe.id"
@ -23,7 +35,13 @@
</el-select> </el-select>
</el-table-column> </el-table-column>
<el-table-column prop="soup" label="汤"> <el-table-column prop="soup" label="汤">
<el-select v-model="soup" multiple size="mini" placeholder="选个汤"> <el-select
v-model="soup"
multiple
size="mini"
placeholder="选个汤"
@change="handleChange"
>
<el-option <el-option
v-for="recipe in soup_recipe" v-for="recipe in soup_recipe"
:key="recipe.id" :key="recipe.id"
@ -49,6 +67,7 @@
<el-button <el-button
type="success" type="success"
plain plain
:disabled="disable_submit"
class="re-generate" class="re-generate"
@click="submitRecipe()" @click="submitRecipe()"
> >
@ -74,6 +93,7 @@ export default {
vegetable: [], vegetable: [],
soup_recipe: [], soup_recipe: [],
soup: [], soup: [],
disable_submit: true,
}; };
}, },
mounted() { mounted() {
@ -102,7 +122,6 @@ export default {
.then((response) => (response, this.getDailyRecipy())); .then((response) => (response, this.getDailyRecipy()));
}, },
submitRecipe() { submitRecipe() {
console.log(this.meat, this.vegetable, this.soup);
axios.put( axios.put(
config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id, config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id,
{ {
@ -111,6 +130,11 @@ export default {
soup: this.soup, soup: this.soup,
} }
); );
this.disable_submit = true;
},
handleChange() {
console.log(this.meat, this.vegetable, this.soup);
this.disable_submit = false;
}, },
getDailyRecipy() { getDailyRecipy() {
axios axios
@ -140,6 +164,7 @@ export default {
} }
} }
this.daily_recipe = [data]; this.daily_recipe = [data];
this.disable_submit = true;
}); });
}, },
}, },