How to use Mixin in main.js in Vuejs?

Question

I am trying to use global information from a mixin. I intend to access the getNow computed prop in a component, but it seems to be undefined.

main.js:

Vue.mixin({
    data: function() {
        return {
          chainBoxURL: "http://172.22.220.197:18004/jsonrpc"
        }
    },
    computed: {
        getNow() {
          const today = new Date();
          const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
          const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
          const dateTime = date + ' ' + time;
          return dateTime;
        }
    }
})

Component:

methods: {
    getChainAddress(form) {
        if (form.password == form.password_again && form.password != '') {
            console.log(this.getNoW)
        }
    }
}

What is happening? Are you receiving an error? What is the output of console log? Where are you including the mixin in the component? This isn't enough information to accurately determine what you need. — VerySeriousSoftwareEndeavours
– VerySeriousSoftwareEndeavours, Commented Jun 27, 2020 at 1:42
Thanks for listening. I need the getNoW method inside a client.vue component. However it is shown undefined. — marcelo.delta
– marcelo.delta, Commented Jun 27, 2020 at 1:47
The prop is defined as getNow, but your component tries to access getNoW (w/uppercase W). — tony19
– tony19, Commented Jun 27, 2020 at 2:16

painotpi · Accepted Answer · 2020-06-27 03:39:23Z

1

Seems like there is a typo in when you try to access getNow, there is a W instead of a w.

Side notes,

You could use template strings to make life slightly easier

const today = new Date();
const date = `${today.getFullYear()}-${(today.getMonth() + 1)}-${today.getDate()}`;
const time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
const dateTime = `${date} ${time}`;

You can flip your conditions within the if statement as JS won't evaluate the 2nd one if the first one is false in case of an &&

if (form.password != '' && form.password == form.password_again) {
  console.log(this.getNoW)
}

answered Jun 27, 2020 at 3:39

painotpi

7,0122 gold badges40 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VerySeriousSoftwareEndeavours · Accepted Answer · 2020-06-27 03:37:57Z

0

The computed prop in the mixin is defined as: getNow() but youn spelt it as getNoW() within the component.

Either that or you may have forgot to include the mixin in the component.

answered Jun 27, 2020 at 3:37

VerySeriousSoftwareEndeavours

1,7634 gold badges33 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to use Mixin in main.js in Vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related