Vuejs v-for错误删除元素firebase答案

【问题标题】：Vuejs v-for error remove element firebaseVuejs v-for错误删除元素firebase
【发布时间】：2020-08-19 03:26:23
【问题描述】：

<tr v-for="(unfilm) in film" v-bind:key="unfilm.key">
 
   <td>
                      <div id="titolo">{{unfilm.titolo}}</div>
    </td>
	
	   <td>
                                <img :src="unfilm.locandina" style="max-width: 50px;">
       </td>
	   
	    <i @click="cancellaFilm(unfilm)" class="material-icons deep-orange-text text-darken-4"
            style="cursor: pointer;">delete</i></td>
			
			
			cancellaFilm(unfilm) {
			  gamesRef.child(unfilm['.key']).remove()
			  
			   this.$toastr.info('Errore', 'Attenzione');
          //  this.$alert("Film cancellato")
        }
  }

当我点击按钮“cancellaFilm”时，返回如下错误：

[Vue 警告]：v-on 处理程序中的错误：“错误：Reference.child 失败：第一个参数是无效路径 = “未定义”。路径必须是非空字符串，并且不能包含“.”、“#”、“$”、“[”或“]””

在 Cdn 模式下它工作在 mpm 模式下它不起作用。我试图测试问题似乎是由于“unfilm”对象的macacato通道我应该修改什么？

下面列出了使用的包的版本：

"bootstrap-vue": "^2.13.0", "core-js": "^3.6.4", “火力基地”：“^7.14.2”， "jquery": "^3.4.1", "ngx-toastr": "^12.0.1", "popper.js": "^1.16.1", “烤面包机”：“^2.1.4”， "vue": "^2.6.11", "vue-simple-alert": "^1.1.1", “vue-toastr-2”：“0.0.10”， “vuefire”：“^2.2.2”

【问题讨论】：

显示一个定义了“gamesRef”的模板

标签： javascript node.js firebase vue.js firebase-realtime-database

【解决方案1】：

在您的 cancellaFilm() 函数中，unfilm['.key'] 是 undefined。

做

gamesRef.child(unfilm['key']).remove()

改为。

【讨论】：

这里是：导出默认 { firebase: { film: gamesRef, }

【解决方案2】：

我插入剩余数据代码：

import {gamesRef} from './firebase'


export default {
  firebase: {
    film: gamesRef,
   
  }

在 firebase.js 中

import Firebase from 'firebase/app'
import 'firebase/database'

const app = Firebase.initializeApp({
 //configuration data
})  
export var db = app.database();
export var gamesRef = db.ref('altro')

add_film() {
   
   gamesRef.push(this.nuovoFilm);
   }

是vu js版本还是firebase版本的问题？我应该改变什么？您可以举个例子或修复代码吗？非常感谢

【讨论】：