Make external function or data accessibles inside the vue methods

[eliottparis]

Hi, first of all, thanks for this library !

I'm trying to figure out the way you can pass external functions or data into the vue script.

Why in the following code the toto value is accessible in the data function but not in the trigger method ?

 [...]
<script>

let toto = 42;
let bar = function() {
    console.log("bar function called");
}

export default {
    data() {
      return {
        val: toto // (42)
      }
    },
    methods: {
      trigger() {
        bar(); // (Uncaught ReferenceError: bar is not defined)
        console.log(toto); // (Uncaught ReferenceError: toto is not defined)
      }
    }
}
</script>
 [...]

PS: I'm a javascript newbie, so sorry if the answer is obvious.

[danielcherubini]

You don't want to do this. Your supposed to be passing in data from the controller. And passing it through using the res.render() method. It's in the readme.

Download the super simple example to see what I mean.

[eliottparis]

Ok i understand how to pass variables from the controller and retrieve them into the view, but I dont know how to call a function in the view injected by the controller:

// index.js
router.get('/', function(req, res){
    let scope = {
        data: {
            toto: 42,
            bar: function(){
              console.log("bar function called");
            }
        },
        vue: {
            [...]
        }
    }

    res.render('home', scope);
});

and

// home.vue
<script>
export default {
    data() {
      return {
        toto: this.toto // (OK: 42)
      }
    },
    methods: {
      trigger() {
        console.log(this.toto); // (Ok: 42)
        this.bar(); // (Uncaught TypeError: this.bar is not a function)
      }
    }
}
</script>

It seems to be linked to (#46).

[danielcherubini]

if you want to call a function in the view... then you need to use Vue...

so look for Method Event Handling

https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

Write it as a method in the view, ... don't pass functions through the data object, try to separate the functions between the controller and the view, this is basic MVC thinking..

if you want to pass a function for some reason use Mixins..

[eliottparis]

Hello @danmademe, thanks to respond so quickly, and sorry to boring you again...

For example, suppose I have a file named auth.js that provide authentication logic code:

// auth.js
module.exports = {

  user: {
    authenticated: false
  },

  login: function(creds, redirect) {
    // ...
  },

  signup: function(creds, redirect) {
    // ...
  },

  logout: function() {
    // ...
  },
  // ...
}

How to make this object accessible from the vue file ?

my first guess was to import this object

// login.vue
<script>
import auth from '../auth';

export default {
  data() {
    return {
      credentials: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submit() {
      auth.login(this.credentials, '/');
    }
  }
}
</script>

but this doesn't work... So, if the client side code can't import code by itself, how should I inject this object through the data object from the controller ? And if Mixins are the only way to achieve that, how should I convert this into a Mixin ?

Thanks again.

[danielcherubini]

https://github.com/express-vue/express-vue#mixins

// auth.js
module.exports = {
    data: function() {
        return {
            user: {
              authenticated: false
            }
        }
    },
    methods: {
        login: function(creds, redirect) {
          // ...
        },

        signup: function(creds, redirect) {
          // ...
        },

        logout: function() {
          // ...
        },
    }
}

and then in the controller

const authMixin = require('./auth.js');
//change the location of the js to wherever your js is..
const scope = {
    vue: {
        mixins: [authMixin]
        //..
    },
    data: {
        //..
    }
}

res.render('foo', scope);

[eliottparis]

Hi @danmademe, thanks for the example,
Just to resume before I close this issue, can you confirm this:

• There is no way to encapsulate the data and logic in a simple self contained object and to pass it directly to the vue via the scope of the render method.
• The only way to pass an object from the controllers to the views is through Mixins.
• The data and the methods of the Mixin will be merged with the ones of the vue component you pass the Mixin to (with potential data name conflicts and method overriding).

[danielcherubini]

1. Yes look at that example, there IS a way to encapsulate both, you just have to put your function into a mixin... you can access the function from the mixin in node as long as it doesn't use browser apis.. if its pure javascript no browser stuff it will work in node.
2. No look at that example.. see the data object? thats your data... see the vue object, thats your configuration of vuejs ..
3. Everything you put from the controller to the view will override.. this is normal behaviour.. so heres a tip, use the data block in your .vue file to setup default values.

[danielcherubini]

Are you trying to make a SPA? ... or are you using Express as your router for more than just a / route?

Because i see a logout function and a login function.. heres what we do... we have vue functions that POST data to the login API which is contained in express.. then.. for logout its a GET to a /logout route

[eliottparis]

I'm not making a SPA, I'll using the Express router.

[danielcherubini]

The idea of the mixins that i can understand from the vuejs documentation, is to share the methods and data between vue files. Are you using these mixins in multiple views?

[eliottparis]

Yes, it just makes more sense to me to bundle all the authentication logic in a single file/helper-object, and to pass it directly to the views that need it (that can be multiple).
But maybe its an architecture issue in my code and I should pass only the methods that are actually used by each view...

[danielcherubini]

Yes, you should only pass the methods that are used in that view...

Thats the idea!