问题是从我的仪表板组件中捕获user_id ... — Laravel / Vue.js

Question

[如果我在方法中将user_id更改为方法，则从仪表板Vue组件TableEditLinks.vue中捕获user_id的问题：submitForm（）从“ 1”更改为“ document.querySelector（” meta [name ='user_id']]“）。content（ '内容'）“，它不起作用。当存在TableEditLinks时，在仪表板页面上写入错误。

感谢您的帮助。

错误：“ data（）中的错误：“ TypeError：document.querySelector（...）为空”]

TableEditLinks.vue

<template>
    <div>
        <router-link :to="`/admin/${resource}s/${id}`">
            <span class="icon"><i class="mdi mdi-eye-outline"></i></span>
        </router-link>

        <router-link :to="`/admin/${resource}s/${id}/edit`">
            <span class="icon"><i class="mdi mdi-pencil-outline"></i></span>
        </router-link>

        <a @click="deleteResource">
            <span class="icon"><i class="mdi mdi-trash-can-outline"></i></span>
        </a>
    </div>
</template>


<script>
export default {
    props: ['resource', 'id'],
    data() {
        return {
            data: {
                user_id: document.querySelector("meta[name='user_id']").content('content')
            }
        }
    },
    methods: {
        deleteResource() {
            if (window.confirm("are you sure? there's no going back!")) {
                axios
                    .delete(`/api/${this.resource}s/${this.id}`, this.data)
                    .then(response => this.$router.go())
            }
        }
    }
}
</script>

UserEdit.vue

<template>
    <div>
        <h1 class="title">edit user</h1>

        <div class="field">
            <label class="label">Name</label>
            <div class="control">
                <input
                    class="input"
                    :class="{ 'is-danger': errors.name }"
                    type="text"
                    placeholder="name"
                    name="name"
                    v-model="name"
                >
            </div>
            <div v-if="errors.name">
                <p
                    class="help is-danger"
                    v-for="(error, index) in errors.name"
                    :key="index"
                >
                    {{ error }}
                </p>
            </div>
        </div>

        <div class="field">
            <label class="label">Email</label>
            <div class="control">
                <input
                    class="input"
                    :class="{ 'is-danger': errors.email }"
                    type="text"
                    placeholder="email"
                    name="email"
                    v-model="email"
                >
            </div>
            <div v-if="errors.email">
                <p
                    class="help is-danger"
                    v-for="(error, index) in errors.email"
                    :key="index"
                >
                    {{ error }}
                </p>
            </div>
        </div>

        <div class="field is-grouped">
            <div class="control">
                <button
                    @click="submitForm"
                    class="button is-primary"
                >Submit</button>
            </div>
            <div class="control">
                <button
                    @click="$router.go(-1)"
                    class="button is-text"
                >Cancel</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            errors: {},
            name: '',
            email: ''
        }
    },
    methods: {
        submitForm() {
            let id = this.$route.params.id
            let data = {
                name: this.name,
                email: this.email,
                user_id: document.querySelector("meta[name='user_id']").content('content')
            }
            axios
                .patch(`/api/users/${id}`, data)
                .then(response => {
                    this.$router.push(`/admin/users/${id}`)
                    this.$root.$emit('flash', response.data.message)
                })
                .catch(errors => {
                    this.errors = errors.response.data.errors
                })
        }
    },
    created() {
        axios.get('/api/users' + this.$route.params.id).then(response => {
            this.post = response.data
        })
    }

}
</script>

<style>

</style>

API / UserController.php

<?php

namespace App\Http\Controllers\API;

use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return User::latest('id')->get();
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\User  $user
     * @return \Illuminate\Http\Response
     */
    public function show(User $user)
    {
        return $user;
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\User  $user
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $user = User::find($id);
        $this->authorize('update', $user);

        $request->validate([
            'email' => 'required',
            'name' => 'required'
        ]);


        $user->update(
            $request->all()
        );

        return response()->json([
            'message' => 'user updated',
            'user' => $user,
        ], 200);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\User  $user
     * @return \Illuminate\Http\Response
     */
    public function destroy(User $user)
    {
        //
    }
}

Answer 1

Vue组件的数据属性仅接受普通对象。然后，它们可以在您的模板中用作反应变量。

您应该根据submitForm（）从deleteResource（）中访问document.querySelector（“ meta [name ='user_id']”）。content（）。>