javascript - VueJS : Cannot read property 'name' of undefined"

Question

我无法理解并找到解决这个问题的方法。我正在尝试使用编辑表单编辑酒吧时间表:

pubs/UpdateProfile.vue

<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;
            });
        }, 

在我的 Controller 中:

PubsController.php

public function updateOpeningTime(Pub $pub)
{
    json_die("Hola");

    json_die($pub->id);

    Schedule::where(['pub_id', $pub->id])->update(['opening_time' => request()->all()]);
}

pub.js

export default class Pub {

constructor() {
    this.id = null;
    this.name = null;
    this.schedulesDisplayed = null;
  }
};

schedulesDisplayed 来自 Pub 和 Schedule 模型之间的关系(pubSchedules:1pub x N 时间表):

/**
 * @return \Illuminate\Database\Eloquent\Collection
 */
public function getSchedulesDisplayedAttribute()
{
    return $this->pubSchedules()->get();
}

编辑后单击“保存”按钮时，我可以显示 Controller 中的消息“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 View 中使用的名为“名称”的东西。我做错了什么？

Answer 1

您的 updateOpeningTime 函数应该是这样的:

updateOpeningTime(schedule) {
    var instance = this;

    this.api.put('/pubschedules/' + this.data.id, schedule).then(response => {
        instance.data = response.data;
    });
}

否则，在 API 调用的“then”内，单词 this 不会引用组件的实例。