Проблема с захватом user_id из моей панели инструментов vue компонент TableEditLinks. vue, когда я изменяю user_id в методах: submitForm () с «1» на «document.querySelector (» meta [name = 'user_id'] ") .content ('content')" он не работает. Запись ошибки на странице панели управления, когда имеется TableEditLinks.
Спасибо за помощь.
ОШИБКА: «Ошибка в data ():» TypeError: document.querySelector (...) is null »
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']").getAttribute('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)
{
//
}
}