question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Binding support for Vue 3 !?

See original GitHub issue

I’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:closed
  • Created 3 years ago
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

15reactions
posvacommented, Sep 26, 2020

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

7reactions
Sun3commented, Nov 2, 2020

@posva Can you give us an update for supporting Vue 3?

Thank you.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found