实例上未定义属性或方法“键” - Vue/Laravel 应用程序

Posted 2023-02-23

【中文标题】实例上未定义属性或方法“键” - Vue/Laravel 应用程序

【英文标题】：Property or method "key" is not defined on the instance - Vue/Laravel application

【发布时间】：2019-04-08 19:47:17

【问题描述】：

我有一个应用程序，在删除其中一个寄存器时，我会收到 Vue-warn 之后的消息：

属性或方法“key”未在实例上定义但被引用 在渲染期间。确保此属性是反应性的，无论是在 数据选项或基于类的组件，通过初始化 属性。

仅在数据/返回上初始化变量键并不能真正解决我的问题。

我注意到的另一件事是数据已从数据库中删除，字段 log.title 和 log.user 立即从日志列表中删除，但该行的另一半仍保留在视图中，直到我离开并重新进入 Log 组件。不确定上述 Vue-warn 是否与此删除/查看错误有关，但可能是。

如果有人能告诉我发生了什么，我将不胜感激？

这是我的 Log.vue：

<template>
    <div class="container">

        <log-show-detail v-if="logModalOpen" :logUser="logUser" :logTitle="logTitle" :logType="logType" :logDescription="logDescription" :logDate="logDate" @closeRequest='close'> </log-show-detail>

        <log-edit v-if="editModalOpen" :logId="logId" :logUser="logUser" :logTitle="logTitle" :logType="logType" :logDescription="logDescription" :logDate="logDate" @closeRequest='close'></log-edit>

        <div class="form-group">
                <!-- <input type="text" class="form-control" id="filter" placeholder="Filter the Logs"> -->
                <br>
                <i class="fas fa-plus jobs-page" data-toggle="modal" data-target="#exampleModalCenter"></i>
                <div v-if="isLoading" class="loading-image">
                    <img src="/develogger-app/public/img/dev-tick.gif" >
                </div>
        </div>

        <div class="row content-holder">
            <table class="table">
                <thead>
                    <tr class="left-align">
                        <th class="">Log</th>
                        <th class="">User</th>
                        <th class="center-align" style="text-align:right">Date</th>

                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="log in logs" :key="log.id" :log="log" @deleteLog="deleteLog" class="tr-table">
                        <td class="client-name" @click="openLogs(log.id,log.user,log.title,log.type,log.description,log.created_at)"> log.title </td>
                        <td class="" > log.user </td>
                        <td class="client-pm" style="text-align:right">moment(log.created_at).fromNow()</td>
                        <!-- <td @click="openEdit(log.id,log.user,log.title,log.type,log.description,log.created_at)"><i class="fas fa-edit"></i></td> -->
                        <td @click="deleteLog(key,log.id)"><i class="fas fa-trash-alt"></i></td>
                    </tr>
                </tbody>
            </table>
        </div>


        <!-- Modal -->
            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Create new Log</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                            <input type="hidden" name="_token" :value="csrf">

                            <input v-model="log.title" name="website" type="text" id="website" class="form-control" placeholder="Log Title"><br>

                            <select v-model="log.domain_id" id="type" class="form-control" name="type"><br>
                                <option value="" disabled selected>Website</option>
                                <option value="1">aerogen.com</option>
                                <option value="4">ardsolus.ie</option>
                                <option value="8">blacklionrealstate.fund</option>
                                <option value="11">blanchadstowncentre.ie</option>
                                <option value="7">chathamandking.ie</option>
                                <option value="5">clayfarm.ie</option>
                                <option value="10">edenplaza.ie</option>
                                <option value="6">hardwicke.ie</option>
                                <option value="2">kennedywilsonresidential.ie</option>
                                <option value="3">loulerie.ie</option>                              
                                <option value="9">procert.ie</option>  
                            </select>

                            <br>

                            <select v-model="log.type" id="type" class="form-control" name="type"><br>
                                <option value="" disabled selected>Type</option>
                                <option>Client Update</option>
                                <option>Dev Update</option>
                                <option>Bug</option>
                                <option>Style Fix</option>
                            </select>

                            <br>

                            <label class="left" for="description">Log Description:</label>
                                <textarea v-model="log.description" class="form-control" rows="5" id="description" name="description"></textarea>
                            <br>

                            <div class="left">
                                <input  v-model="tell" type="checkbox" name="tell-everyone" id="tell-everyone">
                                <label for="description">Tell Everyone?</label>
                                <br>
                                <input v-model="checked" type="checkbox" name="status" id="status" value="checked">
                                <label for="checked">Resolved and Tested?</label>
                            </div>

                    </div>
                    <div class="modal-footer">
                        <button :disabled="!checked || !isComplete" id="log-it" type="button" class="btn btn-circle btn-xl" data-dismiss="modal" @click="save">
                            <span v-if="checked && isComplete" id="button-content"><b>LOG IT</b></span>
                            <span v-else id="button-content"><b>FIX IT</b></span>
                        </button>
                    </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>

import axios from 'axios';
import moment from 'moment';
import ShowDetail from './ShowDetail.vue';
import EditLog from './EditLog.vue';

    export default 

        name:'Log',

        data()
            return 
                key:0,
                logModalOpen: false,
                editModalOpen: false,
                isLoading:'',
                checked:false,
                tell:false,
                logs: [],
                log: id:'', domain_id:'', title: '', type: '', description: '',
                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                errors:,

                //passing those variables to ShowDetails component
                logId:'',
                logUser:'',
                logTitle:'',
                logType:'',
                logDescription:'',
                logDate:'',
            
        ,

        methods:

            getLogs()
                window.axios.get('/develogger-app/public/api/logs').then((data)=>
                    data.forEach(log =>
                        this.logs.push(log)
                    );
                );
            ,

            moment,

            save()
                this.isLoading = true;
                if(this.log.title.length > 0 && this.log.domain_id.length > 0 && this.log.type.length > 0 && this.log.description.length > 0)

                    window.axios.post('/develogger-app/public/api/logs',this.log).then((response) => 
                        this.logs.push(response.data)
                        this.log.domain_id = '';
                        this.log.title = '';
                        this.log.type = '';
                        this.log.description = '';
                        this.checked = false;

                        setTimeout(() => 
                            this.isLoading = false;
                        , 800);

                    ).catch((error) => this.errors = error.response.data.errors)

                

            ,

            openLogs(id,user,title,type,description,date)
                this.logId = id;
                this.logUser = user;
                this.logTitle = title;
                this.logType = type;
                this.logDescription = description;
                this.logDate = date;
                this.logModalOpen = true;
            ,

            openEdit(id,user,title,type,description,date)
                this.logId = id;
                this.logUser = user;
                this.logTitle = title;
                this.logType = type;
                this.logDescription = description;
                this.logDate = date;
                this.editModalOpen = true;
            ,

            close()
                this.logModalOpen = false;
                this.editModalOpen = false;
            ,

            deleteLog(key,id)

                if(confirm("Are you sure you want to delete?"))
                    this.isLoading = true;

                    window.axios.delete(`/develogger-app/public/api/logs/$id`,this.log).then((response) => 
                            this.logs.push(response.data)
                            this.logs.splice(key,1);

                            setTimeout(() => 
                                this.isLoading = false;
                            , 800);

                            this.logId = '';

                        ).catch((error) => this.errors = error.response.data.errors)
                

            

        ,

        created()
            this.getLogs();
        ,

        computed: 
            isComplete () 
                return this.log.title && this.log.domain_id && this.log.type && this.log.description;
            
        ,

        components:
            'log-show-detail': ShowDetail,
            'log-edit': EditLog,
        

    



</script>

【参考方案1】：

变化：

v-for="log in logs" 到 "v-for="(log, index) in logs" <td @click="deleteLog(key, log.id)"... 到 <td @click="deleteLog(index, log.id)"

<tbody>
    <tr v-for="(log, index) in logs" :key="log.id" :log="log" @deleteLog="deleteLog" class="tr-table">
      <td class="client-name" @click="openLogs(log.id,log.user,log.title,log.type,log.description,log.created_at)"> log.title </td>
      <td class="" > log.user </td>
      <td class="client-pm" style="text-align:right">moment(log.created_at).fromNow()</td>
      <!-- <td @click="openEdit(log.id,log.user,log.title,log.type,log.description,log.created_at)"><i class="fas fa-edit"></i></td> -->
      <td @click="deleteLog(index,log.id)"><i class="fas fa-trash-alt"></i></td>
    </tr>
</tbody>

【讨论】：

好吧，错误还在继续。最后我也尝试了

，但目前还没有消息。还是一样

好的，你能打印/控制台key和id里面的deleteLog(key,id)吗？

它不显示任何值，只显示相同的 Vue-warn 错误。即使我仅将 log.id 作为参数传递，Vue 警告错误也会显示在控制台上。

好的，你能创建一个 JSFiddle 的例子，这样对找到问题很有帮助吗？

我想我找到了答案，这太傻了......如果你看看我的 delete() 函数，我已经从 save() 方法复制了一些要在 Promise 内执行的函数，并且我忘了删除：this.logs.push(response.data)...这个函数应该不会在那里吧？