首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用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

复制
相关文章
Java集合中对象排序
集合中的对象排序需求还是比較常见的。当然我们能够重写equals方法,循环比較;同一时候Java为我们提供了更易使用的APIs。当须要排序的集合或数组不是单纯的数字型时,通常能够使用Comparator或Comparable。以简单的方式实现对象排序或自己定义排序。
全栈程序员站长
2022/07/08
7720
检查Python对象
编程环境中的对象很象现实世界中的对象。实际的对象有一定的形状、大小、重量和其它特征。实际的对象还能够对其环境进行响应、与其它对象交互或执行任务。计算机中的对象试图模拟我们身边现实世界中的对象,包括象文档、日程表和业务过程这样的抽象对象。 类似于实际的对象,几个计算机对象可能共享共同的特征,同时保持它们自己相对较小的变异特征。想一想您在书店中看到的书籍。书籍的每个物理副本都可能有污迹、几张破损的书页或唯一的标识号。尽管每本书都是唯一的对象,但都拥有相同标题的每本书都只是原始模板的实例,并保留了原始模板的大
张善友
2018/01/22
1.3K0
Javascript中对象如何检查key(键)是否存在
如果要特别测试对象实例的属性(而不是继承的属性),请使用hasOwnProperty:
IT工作者
2022/02/09
26.6K0
vue的$attrs_vue获取list集合中的对象
原文网址:Vue–attrs, listeners–使用/教程/实例_IT利刃出鞘的博客-CSDN博客
全栈程序员站长
2022/09/27
5.2K0
[ Java学习基础 ] Java的对象容器 -- 集合
  当你有很多书时,你会考虑买一个书柜,将你的书分门别类摆放进入。使用了书柜不仅仅使房间变得整洁,也便于以后使用书时方便查找。在计算机中管理对象亦是如此,当获得多个对象后,也需要一个容器将它们管理起来,这个容器就是集合。   集合本质是基于某种数据结构数据容器。常见的数据结构:数组(Array)、集(Set)、队列(Queue)、链表(Linkedlist)、树(Tree)、堆(Heap)、栈(Stack)和映射(Map)等结构。本文将为大家介绍Java中的集合。 一、集合概述   Java中提供了丰富的集
Kevin_Zhang
2018/05/22
1.8K0
PHP检查对象或类中是否存在属性
$obj = \app\common\library\Email::instance(); $obj->p=889; if(isset($obj->p)){ echo 66; }else{ echo 99; } die; isset既可以判断对象的属性是否存在,也可以判断数组的键名是否存在 未经允许不得转载:肥猫博客 » PHP检查对象或类中是否存在属性
超级小可爱
2023/02/20
4.2K0
JS中,如何检查对象是否为数组?
最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。
前端小智@大迁世界
2021/02/02
7.2K0
JS中,如何检查对象是否为数组?
eclipse快速创建对象的补充的提示
案例: DriverManager.getConnection(url, user, password); 在其后按住“Ctrl+1”就会有提示直接创建new对象,如下: Connecti
兮动人
2021/06/11
4490
eclipse快速创建对象的补充的提示
java8之提取集合中每个对象的属性
要提取属性的话,用Stream中的map,然后使用方法引用,就可以了 例如Student类中有name属性
周杰伦本人
2023/10/12
3120
线程安全集合类中的对象是安全的么?
之前的文章Java并发BUG基础篇中提到过线程安全的集合类如CopyOnWriteArrayList、ConcurrentHashMap等的使用,以及线程安全类的几种创建方法:
FunTester
2020/04/03
6370
mp对象集合in查询
简单说明一下:此处是将入参的list获取到类型,根据表字段和list进行遍历,获取lambda进行取值,然后进行in以及or查询
阿超
2023/02/28
6420
mp对象集合in查询
javalist集合转换数组_集合对象转数组
原链接:https://stackoverflow.com/questions/157944/create-arraylist-from-array
全栈程序员站长
2022/09/25
6460
java8提取对象集合中的一项属性
  java都快出15了,我才开始写8,感觉跟不上时代了[捂脸],如果使用循环的方法提取,比较复杂,代码较多,尝试使用java8提取
彼岸舞
2020/11/03
1.9K0
eclipse中Git的使用
Eclipse从LUNA版本开始默认支持了GIT客户端,可以在导航菜单中windows --> preferences搜索git查看git相关配置。 Eclipse中对于git的操作基本都在右键菜单Team中。
全栈程序员站长
2022/08/04
2K0
eclipse中Git的使用
mybatis查询返回一个对象中带有集合
常用的属性就不说了,特别要注意的是ofType这个要指向各自表的实体类,然后子表的column属性不要和主表重名,一旦重名就会出问题,不知道是不是我配置的问题,希望有大佬指教,反正不重名就可以 接下来就是查询语句了,很简单,只要别名和上面resultMap对的上就ok
星辰sea
2022/10/29
1.9K0
用户代码未处理MetadataException
最近在用EF搭框架的过程中,遇到了很多问题,大部分都是出现在配置文件中,比如说下面这个问题:
全栈程序员站长
2022/08/09
3120
用户代码未处理MetadataException
怎么去掉eclipse对注释的字母语法错误的检查?
操作如下图所示:
黑泽君
2018/10/11
1.2K0
java中的集合
ArrayList和LinkedList的异同? 答:二者都线程不安全,相对线程安全的Vector,执行效率高。此外,ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构。对于随机访问get和set,ArrayList优于LinkedList,因为LinkedList要移动指针。对于新增和删除操作add(特指插入)和remove,LinkedList比较占优势,因为ArrayList要移动数据。
全栈程序员站长
2022/07/18
1.6K0
java中的集合
点击加载更多

相似问题

在Rails3中,可以有一个多部分的form => true和use remote => true吗

22

remote => true和remote: true之间的差异

22

Rails3 + link_to(...,:remote => true) + IE 6/7不起作用

10

用remote=>true阻止Rails link_to吗?

22

:remote=>true的Rails问题

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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