반응형
Vue.js 및 Firebase에서 기존 사용자에게 새 데이터를 추가하는 방법
나는 이미 Firebase에서 생성된 사용자에게 추가 데이터를 추가하도록 Vue.js 앱을 구성하려고 한다.이메일, 암호 및 이름을 포함한 초기 입력을 설정하기 위해 다음과 같이 SignUp.vue를 설정했다.
ref.set({
name: this.name,
email: this.email,
user_id: cred.user.uid
})
홈에서.vue, 데이터베이스에 현재 로그인되어 있는 사용자에게 입력을 추가하기 위해 다음과 같은 방법으로 입력 필드를 포함시켰다.
async addInput () {
let ref = await db.collection('users')
ref.where('user_id', '==', firebase.auth().currentUser.uid).add({
newInput: this.newInput
})
}
하지만, 이것은 여전히 효과가 없었다.기존 사용자에게 입력을 추가하는 방법에 대한 권장 사항이 있으십니까?
아래 전체 코드를 참조하십시오.
SignUp.vue
<template>
<div class="sign-up">
<p>Let's create a new account!</p>
<input type="text" v-model="email" placeholder="Email" />
<br />
<input type="password" v-model="password" placeholder="Password" />
<br />
<input type="text" v-model="name" placeholder="Name" />
<br />
<v-btn @click="signUp" color="info">Sign Up</v-btn>
<span>
or go back to
<router-link to="/login">login</router-link>.
</span>
</div>
</template>
<script>
import slugify from "slugify";
import firebase from "firebase";
import db from "@/firebase/init";
export default {
name: "signUp",
data() {
return {
email: "",
password: "",
name: ""
};
},
methods: {
signUp() {
if (this.name && this.email && this.password) {
this.slug = slugify(this.name, {
replacement: "-",
remove: /[$*_+~,()'"!\-:@]/g,
lower: true
});
let ref = db.collection("users").doc(this.slug);
ref.get().then(doc => {
if (doc.exists) {
this.feedback = "This alias already exists";
} else {
firebase
.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.then(cred => {
ref.set({
name: this.name,
email: this.email,
user_id: cred.user.uid
});
})
.then(() => {
this.$router.push({ name: "Home" });
})
.catch(err => {
this.feedback = err.message;
});
this.feedback = "This alias is free to use";
}
});
} else {
this.feedback = "You must enter all fields";
}
}
}
};
</script>
Home.vue
<template lang="html">
<div class="editProfile container">
<v-app id="inspire">
<v-container fluid>
<h1>Update Your Profile!</h1>
<v-card max-width="344" class="mx-auto">
<v-card-title>New User Input</v-card-title>
<v-text-field v-model="newInput"></v-text-field>
<v-card-actions>
<v-btn text @click="addInput()">Click</v-btn>
</v-card-actions>
<v-list class="elevation-1">
<v-list-tile-content v-for="user in this.$store.getters.getUsers" :key="user.id" >
<v-list-tile>
<textarea v-model="user.newInput" readonly></textarea>
</v-list-tile>
</v-list-tile-content>
</v-list>
</v-card>
</v-container>
</v-app>
</div>
</template>
<script>
import firebase from "firebase";
import db from "@/firebase/init";
export default {
name: "home",
beforeCreate: function() {
this.$store.dispatch("setCurrentUser");
},
data: () => ({
currentlyEditing: null,
newInput: null
}),
methods: {
async addInput() {
let ref = await db.collection("users");
ref.where("user_id", "==", firebase.auth().currentUser.uid).add({
newInput: this.newInput
});
}
}
};
</script>
스토어 js
import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
import db from '@/firebase/init'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
users: null
},
getters: {
getUsers: state => {
return state.users
}
},
mutations: {
setCurrentUser: state => {
const users = []
let ref = db.collection('users')
ref.where('user_id', '==', firebase.auth().currentUser.uid).get()
.then(snapshot => {
snapshot.forEach(doc => {
let currentUserData = doc.data()
currentUserData.id = doc.id
users.push(currentUserData)
})
state.users = users
})
}
},
actions: {
setCurrentUser: context => {
context.commit('setCurrentUser')
}
}
})
오거스토의 피드백에 기초하여, 이것이 궁극적으로 내가 달성하려고 했던 것이다.이 기능은 사용자 입력을 내가 목표로 하는 Firebase의 배열로 밀어 넣는다.그러나 현재 화면에도 어레이 컨테이너를 반환하는 출력을 다시 스타일링하고 싶다.어떻게 하면 배열 컨테이너 없이 배열된 아이템이 선 항목으로 잘 배열되도록 다시 스타일링할 수 있을까?가급적 뷔에티파이와 함께 하는 것이 좋다.고마워!
async addInput () {
let finalInput = this.newInput
let ref = await db.collection('users').where('user_id', '==', firebase.auth().currentUser.uid)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
doc.ref.update({'events': firebase.firestore.FieldValue.arrayUnion(finalInput)})
})
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
}
<v-list class="elevation-1">
<v-list-tile-content v-for="user in this.$store.getters.getUsers" :key="user.id" >
<v-list-tile>
{{ user.events }}
</v-list-tile>
</v-list-tile-content>
</v-list>
그냥 사용해update대신에add분명 효과가 있을 거야
async addInput () {
this.updates.push(this.newInput)
let finalInput = this.updates
let ref = await db.collection('users').where('user_id', '==', firebase.auth().currentUser.uid)
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
doc.ref.update({'newInput': finalInput})
})
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
}
반응형
'IT이야기' 카테고리의 다른 글
| 대기() 호출 시 잘못된 MonitorStateException (0) | 2022.05.02 |
|---|---|
| C 소켓 Sockaddr 및 Sockaddr_storage의 배후 추론 (0) | 2022.05.02 |
| 내 경로에서 Vue'x getter를 사용할 때 "state.user가 null임" (0) | 2022.05.02 |
| vue-cli를 사용하여 중첩된 html을 구축하는 데 오래 걸림 (0) | 2022.05.02 |
| c 어레이 - 경고: 문자열 리터럴이 아닌 형식 (0) | 2022.05.02 |