Binding support for Vue 3 !?
See original GitHub issueI’m still learning about Vue 3, and try to use Vuefire for my upcoming projects. Then, I am experiencing with the official examples from vuejs.org (https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation) which is using Vue 2. Then, I am trying to use Vue 3, but the binding function doesn’t work:
update with latest packages
<script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/vuefire@2.2.4/dist/vuefire.js"></script> <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase.js"></script>
then `
<script>
var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var config = {
apiKey: "AIzaSyAi_yuJciPXLFr_PYPeU3eTvtXf8jbJ8zw",
authDomain: "vue-demo-537e6.firebaseapp.com",
databaseURL: "https://vue-demo-537e6.firebaseio.com"
};
firebase.initializeApp(config);
var usersRef = firebase.database().ref("users");
// create Vue app
const app = createApp({
// initial data
data() {
return {
newUser: {
name: "",
email: ""
}
},
users: []
},
// firebase binding
// https://github.com/vuejs/vuefire
firebase: {
users: usersRef
},
// computed property for form validation state
computed: {
validation: function () {
return {
name: !!this.newUser.name.trim(),
email: emailRE.test(this.newUser.email)
};
},
isValid: function () {
var validation = this.validation;
return Object.keys(validation).every(function (key) {
return validation[key];
});
}
},
// methods
methods: {
addUser: function () {
if (this.isValid) {
usersRef.push(this.newUser);
this.newUser.name = "";
this.newUser.email = "";
}
},
removeUser: function (user) {
usersRef.child(user[".key"]).remove();
}
}
}).mount("#app");`
Thanks for your reading
Issue Analytics
- State:
- Created 3 years ago
- Comments:12 (3 by maintainers)
Top Results From Across the Web
Vue JS 3 Tutorial - 9 - Binding Styles - YouTube
Courses - https://learn.codevolution.dev/ Support UPI - https:// support.codevolution.dev/ Support PayPal ...
Read more >Vue JS 3 Tutorial - 7 - Binding to Attributes - YouTube
Courses - https://learn.codevolution.dev/ Support UPI - https:// support.codevolution.dev/ Support PayPal ...
Read more >Class and Style Bindings | Vue.js
Binding to Objects #. :style supports binding to JavaScript object values - it corresponds to an HTML element's style property:.
Read more >Attribute Binding - Intro to Vue 3
Introducing Attribute Binding. To create a bond between an HTML element's attribute and a value from your Vue app's data, we'll use a...
Read more >Making sense of Multiple v-model Bindings in Vue 3
In Vue 3, the v-model directive has had an overhaul to give developers more power and flexibility when building custom components that support...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I have started developing it but it isn’t finished. It will probably be out in the following week. I have the work on a private repository before moving it to a different branch on this repo
@posva Can you give us an update for supporting Vue 3?
Thank you.