[FIXED] How to pass a variable in form action url in vuejs

Issue

I am trying to pass a variable url in form action but couldn't do so with the following code:

<form action="${url}/auth/login_student" method="POST">
....</form>

EDIT: And in script tag

<script>

export default {
  data() {
    return{
        url: process.env.VUE_APP_URL
    }
  }
}
</script>

I am importing the URL from .env which is 2 folders above this file in hirerachy but it is showing the process.env.VUE_APP_URL is undefined

My .env file code:

VUE_APP_URL=http://localhost:5000

Solution

You have to use v-bind to set action to a JavaScript expression. You can then use a template string.

<form :action="`${url}/auth/login_student`" method="POST">
      ^        ^                         ^

Answered By - Decade Moon

Answer Checked By - Marie Seifert (PHPFixing Admin)