我无法理解并找到解决此问题的方法。我正在尝试使用编辑表单来编辑发布时间表：
<template>
<confirm title="Edit Pub" ok="Save pub" :show="show"
v-on:save="save"
v-on:close="close">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Pub name" v-model="data.name">
</div>
</div>
<div class="field">
<label class="label">Address</label>
<div class="control">
<input class="input" type="text" placeholder="Pub address" v-model="data.address">
</div>
</div>
<div class="field">
<label class="label">Latitude</label>
<div class="control">
<input class="input" type="number" placeholder="Pub latitude" v-model="data.latitude">
</div>
</div>
<div class="field">
<label class="label">Longitude</label>
<div class="control">
<input class="input" type="number" placeholder="Pub longitude" v-model="data.longitude">
</div>
</div>
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="email" v-model="data.email">
</div>
</div>
<div class="field">
<label class="label">Phone</label>
<div class="control">
<input class="input" type="text" placeholder="Pub phone" v-model="data.phone">
</div>
</div>
<div class="field">
<label class="label">Description</label>
<div class="control">
<input class="input" type="text" placeholder="Pub description" v-model="data.description">
</div>
</div>
<div class="field">
<label class="label">Web</label>
<div class="control">
<input class="input" type="text" placeholder="Pub web" v-model="data.web">
</div>
</div>
<div class="field">
<label class="label">Twitter</label>
<div class="control">
<input class="input" type="text" placeholder="Pub twitter" v-model="data.twitterUrl">
</div>
</div>
<div class="field">
<label class="label">Facebook</label>
<div class="control">
<input class="input" type="text" placeholder="Pub facebook" v-model="data.facebookUrl">
</div>
</div>
<div class="field">
<label class="label">Instagram</label>
<div class="control">
<input class="input" type="text" placeholder="Pub instagram" v-model="data.instagramUrl">
</div>
</div>
<!--Tapps-->
<div class="field">
<label class="label">Tapps</label>
<div v-for="tapp in data.tappsDisplayed" class="control">
<input class="input" type="text" placeholder="Pub tapps" v-model="tapp.name">
<div class="button is-danger" @click="deleteTappFromPub(tapp.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
<br>
</div>
<div class="field">
<label class="label">Añadir Tapps</label>
<div class="select">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option :value ="1">CRAFT_BEER</option>
<option :value ="2">SOMETHING_SWEET</option>
<option :value ="3">FREE_TAPA</option>
<option :value ="4">PUB_TERRACE</option>
<option :value ="5">WIFI</option>
<option :value ="6">FOOTBALL_MATCHES</option>
<option :value ="7">ANIMALS_ALLOWED</option>
<option :value ="8">CREDIT_CARD_PAYMENT</option>
<option :value ="9">GLUTEN_FREE</option>
<option :value ="10">VEGETARIAN_DIET</option>
<option :value ="11">BREAKFAST</option>
<option :value ="12">BRUNCH</option>
</select>
</div>
<br>
<br>
<div class="button is-info" @click="addTappToPub()">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Add Tapp</span>
</div>
</div>
<!--Tapps-->
<!--Beers-->
<div class="field">
<label class="label">Beers</label>
<div v-for="beer in data.beersDisplayed" class="control">
<input class="input" type="text" placeholder="Pub beers" v-model="beer.name">
<div class="button is-danger" @click="deleteBeerFromPub(beer.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
<br>
</div>
<div class="field">
<label class="label">Añadir Beers</label>
<div class="select">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option :value ="1">ESTRELLA_GALICIA</option>
<option :value ="2">MAHOU</option>
<option :value ="3">SAN_MIGUEL</option>
<option :value ="4">HEINEKEN</option>
<option :value ="5">OTHERS</option>
<option :value ="6">AMSTEL</option>
<option :value ="7">ESTRELLA_DAMN</option>
</select>
</div>
<br>
<br>
<div class="button is-info" @click="addBeerToPub()">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Add Beer</span>
</div>
</div>
<!--Beers-->
<!--Brands-->
<div class="field">
<label class="label">Brands</label>
<div v-for="brand in data.brandsDisplayed" class="control">
<input class="input" type="text" placeholder="Pub brands" v-model="brand.name">
<div class="button is-danger" @click="deleteBrandFromPub(brand.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
<br>
</div>
<div class="field">
<label class="label">Añadir Brands</label>
<div class="select">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option :value ="1">COCA_COLA</option>
<option :value ="2">SCHWEPPES</option>
<option :value ="3">PEPSICOLA</option>
<option :value ="4">GIN_TONIC</option>
<option :value ="5">SIDRA_EL_LADRON</option>
</select>
</div>
<br>
<br>
<div class="button is-info" @click="addBrandToPub()">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Add Brand</span>
</div>
</div>
<!--Brands-->
<!--Pub Photo-->
<div class="field">
<label class="label">Pub photo</label>
<div class="input-group">
<span class="input-group-addon">Imagen:</span>
<input class="form-control" type="file" v-on:change="updatePhoto">
</div>
<br>
</div>
<!--Pub Photo-->
<!--Set pub schedules-->
<div class="field">
<label class="label">Schedules</label>
<div v-for="schedule in data.schedulesDisplayed" class="control">
<div class="container">
<div class="field">
<label class="label">Week Day: {{schedule.week_day}}</label>
</div>
<div class="row">
<div class="col">
<div class="row">
Opening Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.opening_time">
</div>
<div class="row">
<div class="buttons is-left">
<div class="button is-info" @click="updateOpeningTime(schedule)">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Save</span>
</div>
<div class="button is-danger" @click="deleteOpeningTime(schedule.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
Closing Time: <input class="input" type="text" placeholder="Pub schedules" v-model="schedule.closing_time">
</div>
<div class="row">
<div class="buttons is-left">
<div class="button is-info" @click="updateClosingTime(schedule.id)">
<span class="icon"><i class="fas fa-save fa-lg"></i></span>
<span>Save</span>
</div>
<div class="button is-danger" @click="deleteClosingTime(schedule.id)">
<span class="icon"><i class="far fa-trash-alt"></i></span>
<span>Delete</span>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
<br>
</div>
<!--Set pub schedules-->
<!--Set pub as suggested/non-suggested-->
<div class="field">
<label class="checkbox">
Set pub as suggested <input type="checkbox" v-model="data.suggested">
</label>
</div>
<!--Set pub as suggested/non-suggested-->
</confirm>
<script>
import Pub from "../../models/pub";
export default {
data() {
return {
selected: null,
data: new Pub(),
}
},
props: {
show: Boolean,
data: Object,
},
computed: {
},
methods: {
save() {
this.$emit('save', this.data);
},
close() {
this.$emit('close');
},
hasRootPermissionsAndIsNotRoot() {
return this.CONSTANTS.hasRootPermissions() &&
this.data.permissions !== this.CONSTANTS.ROOT_USER.permissions;
},
deleteTappFromPub(pubtapp) {
this.api.delete('/pubtapps/' + this.data.id + '/' + pubtapp).then(response => {
this.data = response.data;
});
},
addTappToPub(){
this.api.post('/pubtapps/' + this.data.id + '/' + this.selected).then(response => {
this.data = response.data;
});
},
deleteBeerFromPub(pubbeer) {
this.api.delete('/pubbeers/' + this.data.id + '/' + pubbeer).then(response => {
this.data = response.data;
});
},
addBeerToPub(){
this.api.post('/pubbeers/' + this.data.id + '/' + this.selected).then(response => {
this.data = response.data;
});
},
deleteBrandFromPub(pubbrand) {
this.api.delete('/pubbrands/' + this.data.id + '/' + pubbrand).then(response => {
this.data = response.data;
});
},
addBrandToPub(){
this.api.post('/pubbrands/' + this.data.id + '/' + this.selected).then(response => {
this.data = response.data;
});
},
updateOpeningTime(schedule){
this.api.put('/pubschedules/' + this.data.id, schedule).then(response => {
data = response.data;
});
},
updatePhoto(event) {
let photo=null;
if(event && event.target && event.target.files.length){
photo = event.target.files[0];
}
this.api.multipart('/pubphoto/' + this.data.id, {'photo': photo});
}
}
}
以及我编写updateOpeningTime函数的位置：
updateOpeningTime(schedule){
this.api.put('/pubschedules/' + this.data.id + '/' + schedule).then(response => {
this.data = response.data;
});
},
在我的控制器中：
public function updateOpeningTime(Pub $pub)
{
json_die("Hola");
json_die($pub->id);
Schedule::where(['pub_id', $pub->id])->update(['opening_time' => request()->all()]);
}
export default class Pub {
constructor() {
this.id = null;
this.name = null;
this.schedulesDisplayed = null;
}
};
schedulesDisplayed来自发布模型和日程表模型之间的关系（pubSchedules：1pub x N个日程表）：
/**
* @return \Illuminate\Database\Eloquent\Collection
*/
public function getSchedulesDisplayedAttribute()
{
return $this->pubSchedules()->get();
}
在编辑后单击“保存”按钮时，可以显示控制器中显示的消息“ Hola”，但是出现以下错误，不允许我继续开发表单：
app.js:56802 [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
found in
---> <UpdateProfile> at
resources/assets/js/components/pubs/UpdateProfile.vue
<Pubs> at resources/assets/js/components/Pubs.vue
<Root>
我在函数和.vue视图中找不到正在使用的名为“名称”的东西。我在做什么错了？
答案 0 :(得分：1)
您的updateOpeningTime函数应如下所示：
updateOpeningTime(schedule) {
var instance = this;
this.api.put('/pubschedules/' + this.data.id, schedule).then(response => {
instance.data = response.data;
});
}
否则，在API的“ then”调用中，单词this并不引用您的组件实例。