Fetch Post JSON error

Hello,

I am trying post data via VUE like this:


data: {
        article: {
            friend_name: '',
        },
    },
methods: {
        addFriendForm: function(){
            fetch('addfriend', {
                method: 'post',
                body: JSON.stringify(this.article),
                headers: {
                    'content-type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                alert('Nice job!');
            })
            .catch(err => console.log(err  + ' - ' + JSON.stringify(this.article) ));
        },
    },

And my input is :


<input type="text" name="friend_name" id="friend_name" v-model="article.friend_name">

Always getting error : SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data - {"friend_name":"Name"}

Thanks for Help !

MaverickChan

7 years ago

Level 47

why don't you use axios to do the ajax calls?

ahmedsaad

7 years ago

Best Answer

Level 1

you can write function like this using axios :

      buttonClicked: function(){
        var form = new FormData();
        form.append('name',this.name);
        axios({method: 'post',url: enter url,
        data: form,headers: {'Content-Type': 'multipart/form-data'},responseType:'json'
        }).then(this.onSuccess)
        .catch(error => {  
          if (error.response) {
            this.errors.record(error.response.data.errors);
          }
       });
      },
      onSuccess: function(response){

      }

1 like

Please or to participate in this conversation.