Axios put request issue

Question

I'm currently building a blog and I'm stuck in the edit article part.

So, on the edit article page I use v-model in order to retrieve the data from the vue store :

<form action="/http://localhost:4000/articles" method="POST">       
  <div role="button" type="submit" @click="submitArticle">Save</div>

    <div class="article-writing__inner" v-for="article in articles">

     <div class="title-offset">Title</div>
      <input class="input-title"  type="text" v-model="article.title"/>

     <tinymce id="d1"v-model="article.text"></tinymce>

   </div>
</form>

I use a computed property for the v-for loop:

computed: {
    articles() {
       return this.$store.state.articles
      }
 }

And finally I send my data to the API with axios like this :

methods: {
        submitArticle() {
            axios.put('http://localhost:4000/articles/:id', {
                title: article.title,
                text: article.text,
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    }

As I expected, I can't access the store (v-model) data in axios. In the create article template, I used v-model like below and I managed to post with title: this.title.

data() {
  return {
    title: "",
    text: ""
  }
}

How can I bind the v-model from local component data function, or to axios?Or is that another way to do it?

Thank you for your time :)

thezachcannon thezachcannon · Accepted Answer · 2018-09-18T17:37:50

Article is not set to anything in the the put call to axios. One way to grab your state values in the axios call is to do the following.

submitArticle() {
    let vm = this;
    axios.put('http://localhost:4000/articles/:id', {
            title: vm.article.title,
            text: vm.article.text,
        })
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    }
}

It's all about the scoping of what 'this' is in context of the axios call.

Axios put request issue

1 Answers