Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

Installing axios

Now, in order to communicate between the client and the server, we will be using
the axios library. So, let's install the library first:

npm install axios --save

Connecting all the pieces

Now, we have all the things in place (movie model, movies controller, and axios) to
communicate between the client and server. The last thing to do now is to connect these

pieces when we click the submit button in the Movie Add form. If you remember, we

added a placeholder before while submitting the button in AddMovie.vue:

<v-select

label="Movie Release Year"

v-model="select"

:items="years"

></v-select>

<v-text-field

label="Movie Genre"

v-model="genre"

></v-text-field>

<v-btn

@click="submit"

:disabled="!valid"

>

submit

</v-btn>

<v-btn @click="clear">clear</v-btn>

This code tells us to execute the submit() method when the button is clicked. We also

have it in the script section:

...

methods: {

submit() {

if (this.$refs.form.validate()) {

// Perform next action

}

},

clear() {

this.$refs.form.reset();

},