gpt4 book ai didi

firebase - Vue.js 无法在方法中更改数据值

转载 作者:行者123 更新时间:2023-12-03 06:44:39 25 4
gpt4 key购买 nike

谁能帮助我为什么我不能在方法中更改数据值?

    <head>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
</head>
<body>
<script>
var app = new Vue({
data() {
return {
name: ""
}
},
methods: {
firebase: function() {
var docRef = db.doc("test/testdoc");
docRef.get().then(function(doc) {
this.name = doc.data().name; //this one not working
console.log(doc.data().name); //just to test wether I can get data from Firestore
})
}
})
</script>
</body>
“console.log”正在工作,我可以从 Firestore 获取值,但为什么“name”的值没有改变?

最佳答案

thisfunction(){} 中将不再引用 Vue 实例, 因为这种函数声明绑定(bind)了自己的this .

所以你可以节省this进入另一个变量 1st,并在 function(){} 中使用它.

methods: {
firebase: function() {
var docRef = db.doc("test/testdoc");
var _this = this; // save it in a variable for usage inside function
docRef.get().then(function(doc) {
_this.name = doc.data().name; //this one not working
console.log(doc.data().name); //just to test wether I can get data from Firestore
})
}
}

或者,您可以使用箭头函数,如 ()=>{} .箭头函数不绑定(bind)自己的 this .但它是 not supported in some browsers然而。

关于firebase - Vue.js 无法在方法中更改数据值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49571728/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com