首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用Laravel和Vuejs同时更新更多的表行?

如何使用Laravel和Vuejs同时更新更多的表行?
EN

Stack Overflow用户
提问于 2020-08-26 03:39:51
回答 1查看 366关注 0票数 0

我有设置表有3列(id、属性、内容)。我已经在设置表中播撒了一些数据,我想更新这个表。我正在填写一些表单,其中每个输入都显示了表设置的一行。在提交那份表格后,我要更新我的表格.例如,我的一些属性-内容对(在这种形式中的一些输入)是: background_image - 'image.jpg‘标头-’这是标题‘。

我很困惑,因为我不知道我应该发送什么到后端,而且我也不确定端点应该是什么.我希望你们中的一些人能帮我。如果你需要更多的问题,可以自由地问我。预先谢谢,下面是我的代码:

SettingsController.php

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <?php

namespace App\Http\Controllers\Api;

use App\Http\Requests\UpdateSettings;
use App\Http\Resources\SettingResource;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Setting;

class SettingController extends Controller
{

    public function index()
    {
        $settings = Setting::all();

        return SettingResource::collection($settings);
    }

    public function store(Request $request)
    {
        //
    }

    public function show($id)
    {
        //
    }

    public function update(UpdateSettings $request, Setting $setting)
    {

        $setting->where('property', $request->property)
                ->update([ 'content' => $request->content ]);


        return new SettingResource($setting);
    }

    public function destroy($id)
    {
        //
    }
}

Settings.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <template>
    <div class="ml-4 container">
        <button @click="submit" id="saveBtn" class="btn btn-primary mt-2">Save Admin Settings</button>

        <div class="custom-file mt-3">
            <label for="backgroundImage" class="custom-file-label input">Add Background Image</label>
            <input id="backgroundImage" @input="errors.clear('background_image')" @change="uploadImageName" type="file" class="custom-file-input btn btn-primary"
                   style="background: #1d68a7">
            <span class="text-danger"  v-if="errors.get('background_image')">{{ errors.get('background_image') }}</span>
        </div>

        <div class="form-group mt-3">
            <label for="header">Header</label>
            <input :class="{'is-invalid' : errors.get('header')}" @input="errors.clear('header')" v-model="form.header" type="text" class="form-control input" id="header">
            <span class="text-danger"  v-if="errors.get('header')">{{ errors.get('header') }}</span>
        </div>

        <div class="form-group mt-3">
            <label for="videoOne">Video one</label>
            <textarea :class="{'is-invalid' : errors.get('video')}" @input="errors.clear('video')" v-model="form.video" type="text" class="form-control videoBox input" id="videoOne"></textarea>
            <span class="text-danger"  v-if="errors.get('video')">{{ errors.get('video') }}</span>
            <div class="d-flex">
                <toggle-button class="mt-2 toggleButton"
                               @click="toggleBtn()"
                               v-model="form.active_video"
                               color="#82C7EB"
                               :sync="true"
                               :labels="{checked: 'Active', unchecked: 'Deactive'}"
                />
            </div>
        </div>

        <div class="mt-3">
            <label for="sectionOneText">Section One Text</label>
            <editor
                @input="errors.clear('section_one')"
                v-model="form.section_one"
                type="text"
                class="form-control"
                id="sectionOneText"
            >
            </editor>
            <span class="text-danger"  v-if="errors.get('section_one')">{{ errors.get('section_one') }}</span>
            <div class="d-flex">
            <toggle-button class="mt-2 toggleButton"
                           @click="toggleBtn()"
                           v-model="form.active_section_one"
                           color="#82C7EB"
                           :sync="true"
                           :labels="{checked: 'Active', unchecked: 'Deactive'}"
            />
            </div>
        </div>

        <div class="mt-3">
            <label for="editableBoxContainer">Editable Box Container</label>
            <editor
                @input="errors.clear('editable_box')"
                v-model="form.editable_box"
                type="text"
                class="form-control"
                id="editableBoxContainer"
            >
            </editor>
            <span class="text-danger" v-if="errors.get('editable_box')">{{ errors.get('editable_box') }}</span>
            <div class="d-flex">
            <toggle-button class="mt-2 toggleButton"
                           @click="toggleBtn()"
                           v-model="form.active_editable_box"
                           color="#82C7EB"
                           :sync="true"
                           :labels="{checked: 'Active', unchecked: 'Deactive'}"
            />
            </div>
        </div>

        <div class="mt-3">
            <label for="sectionTwoText">Section Two Text</label>
            <editor
                @input="errors.clear('section_two')"
                v-model="form.section_two"
                type="text"
                class="form-control"
                id="sectionTwoText"
            >
            </editor>
            <span class="text-danger"  v-if="errors.get('section_two')">{{ errors.get('section_two') }}</span>
            <div class="d-flex">
            <toggle-button class="mt-2 toggleButton"
                           @click="toggleBtn()"
                           v-model="form.active_section_two"
                           color="#82C7EB"
                           :sync="true"
                           :labels="{checked: 'Active', unchecked: 'Deactive'}"
            />
            </div>
        </div>

        <div class="mt-3">
            <label for="sectionThreeText">Section Three Text</label>
            <editor
                @input="errors.clear('section_three')"
                v-model="form.section_three"
                type="text"
                class="form-control"
                id="sectionThreeText"
            >
            </editor>
            <span class="text-danger"  v-if="errors.get('section_three')">{{ errors.get('section_three') }}</span>
            <div class="d-flex">
            <toggle-button class="mt-2 toggleButton"
                           @click="toggleBtn()"
                           v-model="form.active_section_three"
                           color="#82C7EB"
                           :sync="true"
                           :labels="{checked: 'Active', unchecked: 'Deactive'}"
            />
            </div>
        </div>

        <div class="form-group mt-3">
            <label for="videoTwo">Video two</label>
            <textarea :class="{'is-invalid' : errors.get('video_two')}" @input="errors.clear('video_two')" v-model="form.video_two" type="text" class="form-control videoBox input" id="videoTwo"></textarea>
            <span class="text-danger"  v-if="errors.get('video_two')">{{ errors.get('video_two') }}</span>
            <div class="d-flex">
                <toggle-button class="mt-2 toggleButton"
                               @click="toggleBtn()"
                               v-model="form.active_video_two"
                               color="#82C7EB"
                               :sync="true"
                               :labels="{checked: 'Active', unchecked: 'Deactive'}"
                />
            </div>
        </div>

        <div class="form-group mt-3">
            <label for="linkOne">Link One</label>
            <input :class="{'is-invalid' : errors.get('link_one')}" @input="errors.clear('link_one')" v-model="form.link_one" type="text" class="form-control input" id="linkOne">
            <span class="text-danger"  v-if="errors.get('link_one')">{{ errors.get('link_one') }}</span>
        </div>

        <div class="form-group mt-3">
            <label for="linkTwo">Link Two</label>
            <input :class="{'is-invalid' : errors.get('link_two')}" @input="errors.clear('link_two')" v-model="form.link_two" type="text" class="form-control input" id="linkTwo">
            <span class="text-danger"  v-if="errors.get('link_two')">{{ errors.get('link_two') }}</span>
        </div>

    </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import {ToggleButton} from 'vue-js-toggle-button'
import Errors from "../helpers/Errors";
Vue.component('ToggleButton', ToggleButton)
export default {
    name: "Settings",
    components: {Editor},

    data() {
        return {
            errors: new Errors(),
            form: {
                background_image: '',
                header: '',
                video: '',
                active_video: null,
                section_one: '',
                active_section_one: null,
                editable_box: '',
                active_editable_box: null,
                section_two: '',
                active_section_two: null,
                section_three: '',
                active_section_three: null,
                video_two: '',
                active_video_two: null,
                link_one: '',
                link_two: '',
            },
        }
    },
    mounted() {
    },
    methods: {
        toggleBtn() {
            if (this.sectionTwotext) {
                this.sectionTwotext = false;
            } else {
                this.sectionTwotext = true;
            }
        },
        async submit() {
            try {
                const form = Object.assign({}, this.form);

                console.log(form);

                let result = Object.keys(form).map(function (key) {

                    return [key, form[key]];
                });
                console.log(result[0])

                result._method = 'PUT';

                for(let i=0; i<=15; i++) {
                    let objectResult = Object.assign({}, result[i]);
                    console.log('objectResult')
                    console.log(objectResult)
                    objectResult._method = 'PUT';
                     const {data} = await axios.post(`/api/setting/${i}`, objectResult);
                 }
            } catch (error) {
                console.log(error.response.data.errors);
                this.errors.record(error.response.data.errors);
            }

        },
        uploadImageName() {
            let image = document.getElementById("backgroundImage");
            this.form.background_image = image.files[0].name;
            console.log(image.files[0].name);
        },
    }
}
</script>

<style scoped>
#saveBtn {
    border-radius: 0;
}

.input {
    border-radius: 0;
}

.videoBox {
    height: 300px;
}
.toggleButton {
    margin-left: auto;
}
</style>

我的异步提交功能不好,我只是在尝试一些东西.提前感谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-26 08:51:48

我会考虑在您的endpoint上有一个api,您可以在其中提交整个表单。

api.php

创建一个路由,我们可以将我们的axios请求提交到:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Route::put('/settings', 'Api\SettingController@update')->name('api.settings.update');

请注意,我已经命名了controller,因为您可能有此控制器的webapi版本。在单个控制器中混合apiweb操作是不可取的。

web.php

这是一个标准的web路由,它将显示包含vue组件的blade视图。我们将遍历这些设置,然后将这些设置作为prop传递给prop组件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Route::get('/settings', 'SettingController@edit')->name('settings.edit');

edit.blade.php

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<settings :settings="{{ $settings }}"></settings>

Settings.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
axios.put('/api/settings', {
  header: this.form.header,
  background_image: this.form.background_image
  ... other fields to be submitted
})
.then(success => {
  console.log(success);
})
.catch(error => {
  console.log(error);
});

SettingController.php

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public function edit()
{
  return view('settings.edit', ['settings' => Setting::all()]);
}

Api\SettingController.php

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public function update(Request $request)
{
  $validator = Validator::make(
    $request->all(),
    [
      'header' => ['required', 'string'],
      'background_image' => ['required', 'string']
      ... other fields to be validated
    ]
  );

  if ($validator->fails()) {
    return response()->json(['errors' => $validator->errors()], 422);
  }

  foreach ($validator->validated() as $property => $content) {
    Setting::where('property', $property)->update(['content' => $content]);
  }

  return response()->json(['success' => true], 200);
}

您可能需要考虑将设置拆分为组和提交组,而不是整个表单,或者单独提交每个设置(如果这样做是有意义的)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63596872

复制
相关文章
如何在PowerBI中同时使用日期表和时间表
首先,由于日期表和时间表不能叠加在一起(原因在前文说过了),所以肯定是两张表单独和事实表进行关联,而事实表中日期和时间是在同一列。
陈学谦
2020/07/01
8.7K0
如何在PowerBI中同时使用日期表和时间表
使用 Laravel sharedLock 与 lockForUpdate 进行数据表行锁
拼团功能,当 A 客户开团之后(两人团),如果 B 和 C 同时支付,如何规避两人同时将拼团人数增加。
码农编程进阶笔记
2021/07/20
2.7K0
Laravel Migrate修改表和创建表
php artisan make:migration create_table_test –table=test_a 修改表 Schema::table(‘test’, function (Blueprint $table) { $table->dropColumn([‘data’]); $table->renameColumn(‘tttt’,’test’); $table->addColumn(‘string’,’t_id’, [‘length’ => 200]); }); php artisan
苦咖啡
2018/04/28
1.9K0
使用 Laravel sharedLock 与 lockForUpdate 进行数据表行锁「建议收藏」
拼团功能,当 A 客户开团之后(两人团),如果 B 和 C 同时支付,如何规避两人同时将拼团人数增加。
全栈程序员站长
2022/07/12
3K0
如何使用webpack减少vuejs打包的大小
我在Stanley Black &amp; Decker的工业4.0团队工作。我们的团队最近为Stanley制造工厂创建了相当于App Store的产品。工厂可以访问市场并根据他们在该位置生产的产品选择他们需要的应用程序。这将构建一个自定义构建,将所有这些应用程序捆绑在一起,以便工厂运行。由于捆绑了如此众多的应用程序,我们的vue生产构建时,导致多个大小过度的警告。
Jimmy_is_jimmy
2023/05/23
1.8K0
如何使用webpack减少vuejs打包的大小
VueJs中如何使用Teleport组件
在DOM结构相对比较复杂,层级嵌套比较深的组件内,需要根据相对应的模块业务处理一些逻辑,该逻辑属于当前组件
itclanCoder
2023/02/26
2.3K0
VueJs中如何使用Teleport组件
如何锁定表头和表行同时锁定_jquery表头固定列
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。
全栈程序员站长
2022/09/20
2.5K0
如何锁定表头和表行同时锁定_jquery表头固定列
laravel 中如何使用ajax和vue总结
最近写一个项目是基于laravel框架的,这个框架传言是为艺术而创作的优雅框架,简洁分明的风格,很吸引我,所以最近研究比较多。本次就是基于该框架然后将Vue插件加入实现一定的功能,vue插件本身强大,具体不说了,有兴趣的同学可以去官网
用户8449980
2021/07/13
1.9K0
VueJs中如何使用provide与inject
在vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的,解决的是跨组件(祖孙)间通信的一种方式
itclanCoder
2023/02/26
9110
VueJs中如何使用provide与inject
Laravel 批量更新
Laravel 简单的批量更新数据 需求:将order 表的 status 字段更新为2,条件是 id 在 arr 数组中的行。 $orderId = [1,2,4,6,8]; \DB::table('order')->whereIn('id', $orderId)->update(['status' => 2]); 完成简单的数据批量更新。
句小芒
2022/12/29
7000
Laravel如何优雅的使用Swoole
正在做一个智能家居的项目,接收下位机(就是控制智能家居硬件模块的HUB)协议解析,Web端维护硬件状态,利用APP交互。由于下位机数据是发送到服务器的XXX端口,所以必须对XXX端口进行监听。其实和聊天室的概念差不多,研究了一下workerman、swoole和其他几个开源的项目,决定采用swoole。
OwenZhang
2021/12/08
1.6K0
更新的同时获取被更新的记录的id
更新的同时获取被更新的记录的id 一般我的写法是 select auto_id into v_id from history where state=1 and rownum=1; update history set state=0 where auto_id=v_id 能不能把两条语句合成一条写呀 可以了 UPDATE BIZ_WORKFLOW SET SEND_MARK=1 WHERE AUTO_ID=ID RETURN AUTO_ID INTO ID ;
阿新
2018/04/12
1.7K0
【译】如何使用webpack减少vuejs打包的大小
Vue建议捆版bundles不超过244KiB。我们只有14个资源,每个资源都超过这个规模。此外,我们有四个入口点也高于建议的大小。以下是我将构建的大小减半的方法。
Jimmy_is_jimmy
2019/08/01
4.2K0
【译】如何使用webpack减少vuejs打包的大小
excel同时冻结首行和首列怎么操作
  之前ytkah只知道excel可以冻结首行或首列,但还不清楚如何同时冻结excel首行和首列,后面看到小C的报表,问了他才明白怎么操作。   首先,我们先把选中B2单元格,点击导航菜单的“视图”
ytkah
2018/03/06
3.3K0
excel同时冻结首行和首列怎么操作
laravel setxxAttribute和getxxAttribute的使用
setxxAttribute 在设置(sql: insert update) 的时候 会将$obj->xx = ‘value’的时候, 操作数据库之前 自动转化一下
全栈程序员站长
2022/07/07
9540
【MEIAT-CMAQ】如何同时使用MEIC和MIX清单?
MEIC清单仅为中国境内的排放清单,但是在模拟全国污染场的案例中,中国周边国家的排放是不容忽视的,因此需要通过MIX清单来对MEIC进行一个补充。
自学气象人
2023/06/21
5870
【MEIAT-CMAQ】如何同时使用MEIC和MIX清单?
Laravel DB批量更新的方法
replace into 操作本质是对重复的记录先delete 后insert,如果更新的字段不全会将缺失的字段置为缺省值,用这个清空大量数据。
全栈程序员站长
2022/08/09
1.4K0
点击加载更多

相似问题

更新整个表(Laravel和Vuejs)

10

用Vuejs更新Laravel (BelongsToMany)表

11

如何使用Vuejs和Laravel应用数据表

116

如何使用laravel和vue同时保存和更新

10

批更新表行,同时重新排序和更新?

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文