Vue.js client Rails API delete object
0
I have a rails 5.1 api delivering json which is being consumed by a Vue.js powered front-end. I can CRU but not Delete. I have checked in Postman and the delete request works as expected, but for some reason it does not work via the Vue.js client.
I suspect the problem is in the link itself, but I am not sure how to make a delete request via the browser so I have not tested it there. Here is the code for the link:
```
in Entities.vue:
<tr v-for="entity in entities" :key="entity.id">
<td>{{ entity.title }}</td>
<td>{{ entity.description }}</td>
<td align="center">
<router-link v-bind:to="{ name: 'EditEntity', params: { id: entity.id } }">Edit</router-link> |
<a href="#" @click="deleteEntity(entity.id)">Delete</a>
</td>
</tr>
```
and the javascript for the action:
in src/services/EntitiesService.js
deleteEntity (id) {
return Api().delete('entities/' + id)
}
and src/services/Api.js:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://localhost:3000',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*'
}
})
}
here is the network request which i can tell doesn't look right:
Request URL: http://localhost:8080/favicon.ico
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade
Accept-Ranges: bytes
Connection: keep-alive
Date: Sat, 24 Nov 2018 21:57:10 GMT
ETag: W/"144-+Koybw7A2IzbrCsGVT8Z3o3UXFk"
X-Powered-By: Express
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: ahoy_visitor=7034198d-14a1-4d36-8bcf-495741e6c80a; _ga=GA1.1.491252661.1536002193; _blackops_session=eVpXOUVJNzB1QVI1OE4yVFowWEFDUmRVVXNyTG9FUE9Da2N6RmpsTDVEVmpEOVpDUkUyNTRJeFIwWXB5UU01T2FoYzBBd1NSbnRkdlBOT3BWL1NadG91d0labWcxZmQ3dGIzRkZ6QVlIcURsM0JxS1hERGpndDducnJIMEROYzhGeXlMc2NmSFdVclRrZktqdk02WkU4YmRQdnpvTWlFY3lRQnhBSVJZWTRSOWkybHFtV3JEemtHYTZtZUVrQmVxZkNrc25lK0doQm44VFR4c1RKaHNsUT09LS0zWmZaNWIyZEdDZlRJMWprcmFqNUlBPT0%3D--cd8059919655e6544a22a47b3d93785928644e8c; _book_review_session=Rsqk%2FCrHd8tvmx1vP4l%2B3QltWUP%2BVyE%2BkrPAUWMW%2BbbqOusZORm8vCJ2mlvzTK4aASYVZhSM9bMBGY%2BjDde0WEk7hMryeUagAK0%2FTE%2BlQcsXRVJCVRI39E42Ib4uh%2BXA9bBFk%2B4FeZveolx5njVNedtDgv3C0Y8Lud%2FxkvJYxWl%2FSCkU0eGr1fRheaynCF0fxftsScwQyuTscuhNDoSFC%2BrMgqS0Q%2B1bnl2p--IiFoc%2BJv6jQnURmH--h5yYqRKwplqk%2BY0Eyb7edQ%3D%3D; _jadenseffort_session=4QnEiv%2FhvJQuhUfFF%2BYt5e9tbNnKtzLqkJQ1pGhQ56bbKfkPfY7qP937u2PL0l4T14vfyRNj2m3tP%2FVk1ZQH%2B0yMOV%2Fmbe0KTtvXzCQrqA0PGRqHV9fPwzgZKCpPJit%2FndfXbOMi%2BS6FhSWYKd8%3D--w8URgVaBAILD6N7M--paJNx6RiLH5UN5J0MX7Wng%3D%3D
Host: localhost:8080
If-None-Match: W/"144-+Koybw7A2IzbrCsGVT8Z3o3UXFk"
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
vuejs2 jsonapi-rails
asked Nov 24 '18 at 17:24
user2799827user2799827
818
add a comment |
0
I have a rails 5.1 api delivering json which is being consumed by a Vue.js powered front-end. I can CRU but not Delete. I have checked in Postman and the delete request works as expected, but for some reason it does not work via the Vue.js client.
I suspect the problem is in the link itself, but I am not sure how to make a delete request via the browser so I have not tested it there. Here is the code for the link:
```
in Entities.vue:
<tr v-for="entity in entities" :key="entity.id">
<td>{{ entity.title }}</td>
<td>{{ entity.description }}</td>
<td align="center">
<router-link v-bind:to="{ name: 'EditEntity', params: { id: entity.id } }">Edit</router-link> |
<a href="#" @click="deleteEntity(entity.id)">Delete</a>
</td>
</tr>
```
and the javascript for the action:
in src/services/EntitiesService.js
deleteEntity (id) {
return Api().delete('entities/' + id)
}
and src/services/Api.js:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://localhost:3000',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*'
}
})
}
here is the network request which i can tell doesn't look right:
Request URL: http://localhost:8080/favicon.ico
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade
Accept-Ranges: bytes
Connection: keep-alive
Date: Sat, 24 Nov 2018 21:57:10 GMT
ETag: W/"144-+Koybw7A2IzbrCsGVT8Z3o3UXFk"
X-Powered-By: Express
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: ahoy_visitor=7034198d-14a1-4d36-8bcf-495741e6c80a; _ga=GA1.1.491252661.1536002193; _blackops_session=eVpXOUVJNzB1QVI1OE4yVFowWEFDUmRVVXNyTG9FUE9Da2N6RmpsTDVEVmpEOVpDUkUyNTRJeFIwWXB5UU01T2FoYzBBd1NSbnRkdlBOT3BWL1NadG91d0labWcxZmQ3dGIzRkZ6QVlIcURsM0JxS1hERGpndDducnJIMEROYzhGeXlMc2NmSFdVclRrZktqdk02WkU4YmRQdnpvTWlFY3lRQnhBSVJZWTRSOWkybHFtV3JEemtHYTZtZUVrQmVxZkNrc25lK0doQm44VFR4c1RKaHNsUT09LS0zWmZaNWIyZEdDZlRJMWprcmFqNUlBPT0%3D--cd8059919655e6544a22a47b3d93785928644e8c; _book_review_session=Rsqk%2FCrHd8tvmx1vP4l%2B3QltWUP%2BVyE%2BkrPAUWMW%2BbbqOusZORm8vCJ2mlvzTK4aASYVZhSM9bMBGY%2BjDde0WEk7hMryeUagAK0%2FTE%2BlQcsXRVJCVRI39E42Ib4uh%2BXA9bBFk%2B4FeZveolx5njVNedtDgv3C0Y8Lud%2FxkvJYxWl%2FSCkU0eGr1fRheaynCF0fxftsScwQyuTscuhNDoSFC%2BrMgqS0Q%2B1bnl2p--IiFoc%2BJv6jQnURmH--h5yYqRKwplqk%2BY0Eyb7edQ%3D%3D; _jadenseffort_session=4QnEiv%2FhvJQuhUfFF%2BYt5e9tbNnKtzLqkJQ1pGhQ56bbKfkPfY7qP937u2PL0l4T14vfyRNj2m3tP%2FVk1ZQH%2B0yMOV%2Fmbe0KTtvXzCQrqA0PGRqHV9fPwzgZKCpPJit%2FndfXbOMi%2BS6FhSWYKd8%3D--w8URgVaBAILD6N7M--paJNx6RiLH5UN5J0MX7Wng%3D%3D
Host: localhost:8080
If-None-Match: W/"144-+Koybw7A2IzbrCsGVT8Z3o3UXFk"
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
vuejs2 jsonapi-rails
asked Nov 24 '18 at 17:24
user2799827user2799827
818
Could you please post what your network request is? Side question, what is the reason for using form requests through axios over json?
– Austio
Nov 24 '18 at 21:00
I thought axios was required since the requests are being made to a remote server separate from the client. I was following various tutorials
– user2799827
Nov 24 '18 at 22:00
You will have a much easier time on API requests if you usejsonas the request instead of form encoded. Axios is a good client for that.
– Austio
Nov 25 '18 at 3:24
Side note, that request is to port 8080 and is a get request to some express server. What you need is the request to port 3000
– Austio
Nov 25 '18 at 3:28
port 8080 is where the client app is being served. looks like it is retrieving the Vue favicon only, unrelated to the attempt to delete except that on clicking to Delete, the page is refreshing. Api.js combined with EntitiesService.js is aimed at sending a DELETE request to localhost:3000/entities/:id, but it's not happening onclick.
– user2799827
Nov 25 '18 at 12:03
add a comment |
0
0
0
I have a rails 5.1 api delivering json which is being consumed by a Vue.js powered front-end. I can CRU but not Delete. I have checked in Postman and the delete request works as expected, but for some reason it does not work via the Vue.js client.
I suspect the problem is in the link itself, but I am not sure how to make a delete request via the browser so I have not tested it there. Here is the code for the link:
```
in Entities.vue:
<tr v-for="entity in entities" :key="entity.id">
<td>{{ entity.title }}</td>
<td>{{ entity.description }}</td>
<td align="center">
<router-link v-bind:to="{ name: 'EditEntity', params: { id: entity.id } }">Edit</router-link> |
<a href="#" @click="deleteEntity(entity.id)">Delete</a>
</td>
</tr>
```
and the javascript for the action:
in src/services/EntitiesService.js
deleteEntity (id) {
return Api().delete('entities/' + id)
}
and src/services/Api.js:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://localhost:3000',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*'
}
})
}
here is the network request which i can tell doesn't look right:
Request URL: http://localhost:8080/favicon.ico
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade
Accept-Ranges: bytes
Connection: keep-alive
Date: Sat, 24 Nov 2018 21:57:10 GMT
ETag: W/"144-+Koybw7A2IzbrCsGVT8Z3o3UXFk"
X-Powered-By: Express
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: ahoy_visitor=7034198d-14a1-4d36-8bcf-495741e6c80a; _ga=GA1.1.491252661.1536002193; _blackops_session=eVpXOUVJNzB1QVI1OE4yVFowWEFDUmRVVXNyTG9FUE9Da2N6RmpsTDVEVmpEOVpDUkUyNTRJeFIwWXB5UU01T2FoYzBBd1NSbnRkdlBOT3BWL1NadG91d0labWcxZmQ3dGIzRkZ6QVlIcURsM0JxS1hERGpndDducnJIMEROYzhGeXlMc2NmSFdVclRrZktqdk02WkU4YmRQdnpvTWlFY3lRQnhBSVJZWTRSOWkybHFtV3JEemtHYTZtZUVrQmVxZkNrc25lK0doQm44VFR4c1RKaHNsUT09LS0zWmZaNWIyZEdDZlRJMWprcmFqNUlBPT0%3D--cd8059919655e6544a22a47b3d93785928644e8c; _book_review_session=Rsqk%2FCrHd8tvmx1vP4l%2B3QltWUP%2BVyE%2BkrPAUWMW%2BbbqOusZORm8vCJ2mlvzTK4aASYVZhSM9bMBGY%2BjDde0WEk7hMryeUagAK0%2FTE%2BlQcsXRVJCVRI39E42Ib4uh%2BXA9bBFk%2B4FeZveolx5njVNedtDgv3C0Y8Lud%2FxkvJYxWl%2FSCkU0eGr1fRheaynCF0fxftsScwQyuTscuhNDoSFC%2BrMgqS0Q%2B1bnl2p--IiFoc%2BJv6jQnURmH--h5yYqRKwplqk%2BY0Eyb7edQ%3D%3D; _jadenseffort_session=4QnEiv%2FhvJQuhUfFF%2BYt5e9tbNnKtzLqkJQ1pGhQ56bbKfkPfY7qP937u2PL0l4T14vfyRNj2m3tP%2FVk1ZQH%2B0yMOV%2Fmbe0KTtvXzCQrqA0PGRqHV9fPwzgZKCpPJit%2FndfXbOMi%2BS6FhSWYKd8%3D--w8URgVaBAILD6N7M--paJNx6RiLH5UN5J0MX7Wng%3D%3D
Host: localhost:8080
If-None-Match: W/"144-+Koybw7A2IzbrCsGVT8Z3o3UXFk"
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
vuejs2 jsonapi-rails
asked Nov 24 '18 at 17:24
user2799827user2799827
818
I have a rails 5.1 api delivering json which is being consumed by a Vue.js powered front-end. I can CRU but not Delete. I have checked in Postman and the delete request works as expected, but for some reason it does not work via the Vue.js client.
I suspect the problem is in the link itself, but I am not sure how to make a delete request via the browser so I have not tested it there. Here is the code for the link:
```
in Entities.vue:
<tr v-for="entity in entities" :key="entity.id">
<td>{{ entity.title }}</td>
<td>{{ entity.description }}</td>
<td align="center">
<router-link v-bind:to="{ name: 'EditEntity', params: { id: entity.id } }">Edit</router-link> |
<a href="#" @click="deleteEntity(entity.id)">Delete</a>
</td>
</tr>
```
and the javascript for the action:
in src/services/EntitiesService.js
deleteEntity (id) {
return Api().delete('entities/' + id)
}
and src/services/Api.js:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://localhost:3000',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': '*'
}
})
}
here is the network request which i can tell doesn't look right:
Request URL: http://localhost:8080/favicon.ico
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade
Accept-Ranges: bytes
Connection: keep-alive
Date: Sat, 24 Nov 2018 21:57:10 GMT
ETag: W/"144-+Koybw7A2IzbrCsGVT8Z3o3UXFk"
X-Powered-By: Express
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: ahoy_visitor=7034198d-14a1-4d36-8bcf-495741e6c80a; _ga=GA1.1.491252661.1536002193; _blackops_session=eVpXOUVJNzB1QVI1OE4yVFowWEFDUmRVVXNyTG9FUE9Da2N6RmpsTDVEVmpEOVpDUkUyNTRJeFIwWXB5UU01T2FoYzBBd1NSbnRkdlBOT3BWL1NadG91d0labWcxZmQ3dGIzRkZ6QVlIcURsM0JxS1hERGpndDducnJIMEROYzhGeXlMc2NmSFdVclRrZktqdk02WkU4YmRQdnpvTWlFY3lRQnhBSVJZWTRSOWkybHFtV3JEemtHYTZtZUVrQmVxZkNrc25lK0doQm44VFR4c1RKaHNsUT09LS0zWmZaNWIyZEdDZlRJMWprcmFqNUlBPT0%3D--cd8059919655e6544a22a47b3d93785928644e8c; _book_review_session=Rsqk%2FCrHd8tvmx1vP4l%2B3QltWUP%2BVyE%2BkrPAUWMW%2BbbqOusZORm8vCJ2mlvzTK4aASYVZhSM9bMBGY%2BjDde0WEk7hMryeUagAK0%2FTE%2BlQcsXRVJCVRI39E42Ib4uh%2BXA9bBFk%2B4FeZveolx5njVNedtDgv3C0Y8Lud%2FxkvJYxWl%2FSCkU0eGr1fRheaynCF0fxftsScwQyuTscuhNDoSFC%2BrMgqS0Q%2B1bnl2p--IiFoc%2BJv6jQnURmH--h5yYqRKwplqk%2BY0Eyb7edQ%3D%3D; _jadenseffort_session=4QnEiv%2FhvJQuhUfFF%2BYt5e9tbNnKtzLqkJQ1pGhQ56bbKfkPfY7qP937u2PL0l4T14vfyRNj2m3tP%2FVk1ZQH%2B0yMOV%2Fmbe0KTtvXzCQrqA0PGRqHV9fPwzgZKCpPJit%2FndfXbOMi%2BS6FhSWYKd8%3D--w8URgVaBAILD6N7M--paJNx6RiLH5UN5J0MX7Wng%3D%3D
Host: localhost:8080
If-None-Match: W/"144-+Koybw7A2IzbrCsGVT8Z3o3UXFk"
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
vuejs2 jsonapi-rails
vuejs2 jsonapi-rails
asked Nov 24 '18 at 17:24
user2799827user2799827
818
asked Nov 24 '18 at 17:24
user2799827user2799827
818
edited Nov 24 '18 at 21:59
user2799827
asked Nov 24 '18 at 17:24
user2799827user2799827
818
asked Nov 24 '18 at 17:24
user2799827user2799827
818
asked Nov 24 '18 at 17:24
user2799827user2799827
818
818
Could you please post what your network request is? Side question, what is the reason for using form requests through axios over json?
– Austio
Nov 24 '18 at 21:00
I thought axios was required since the requests are being made to a remote server separate from the client. I was following various tutorials
– user2799827
Nov 24 '18 at 22:00
You will have a much easier time on API requests if you usejsonas the request instead of form encoded. Axios is a good client for that.
– Austio
Nov 25 '18 at 3:24
Side note, that request is to port 8080 and is a get request to some express server. What you need is the request to port 3000
– Austio
Nov 25 '18 at 3:28
port 8080 is where the client app is being served. looks like it is retrieving the Vue favicon only, unrelated to the attempt to delete except that on clicking to Delete, the page is refreshing. Api.js combined with EntitiesService.js is aimed at sending a DELETE request to localhost:3000/entities/:id, but it's not happening onclick.
– user2799827
Nov 25 '18 at 12:03
add a comment |
Could you please post what your network request is? Side question, what is the reason for using form requests through axios over json?
– Austio
Nov 24 '18 at 21:00
I thought axios was required since the requests are being made to a remote server separate from the client. I was following various tutorials
– user2799827
Nov 24 '18 at 22:00
You will have a much easier time on API requests if you usejsonas the request instead of form encoded. Axios is a good client for that.
– Austio
Nov 25 '18 at 3:24
Side note, that request is to port 8080 and is a get request to some express server. What you need is the request to port 3000
– Austio
Nov 25 '18 at 3:28
port 8080 is where the client app is being served. looks like it is retrieving the Vue favicon only, unrelated to the attempt to delete except that on clicking to Delete, the page is refreshing. Api.js combined with EntitiesService.js is aimed at sending a DELETE request to localhost:3000/entities/:id, but it's not happening onclick.
– user2799827
Nov 25 '18 at 12:03
Could you please post what your network request is? Side question, what is the reason for using form requests through axios over json?
– Austio
Nov 24 '18 at 21:00
Could you please post what your network request is? Side question, what is the reason for using form requests through axios over json?
– Austio
Nov 24 '18 at 21:00
I thought axios was required since the requests are being made to a remote server separate from the client. I was following various tutorials
– user2799827
Nov 24 '18 at 22:00
I thought axios was required since the requests are being made to a remote server separate from the client. I was following various tutorials
– user2799827
Nov 24 '18 at 22:00
You will have a much easier time on API requests if you use
json as the request instead of form encoded. Axios is a good client for that.– Austio
Nov 25 '18 at 3:24
You will have a much easier time on API requests if you use
json as the request instead of form encoded. Axios is a good client for that.– Austio
Nov 25 '18 at 3:24
Side note, that request is to port 8080 and is a get request to some express server. What you need is the request to port 3000
– Austio
Nov 25 '18 at 3:28
Side note, that request is to port 8080 and is a get request to some express server. What you need is the request to port 3000
– Austio
Nov 25 '18 at 3:28
port 8080 is where the client app is being served. looks like it is retrieving the Vue favicon only, unrelated to the attempt to delete except that on clicking to Delete, the page is refreshing. Api.js combined with EntitiesService.js is aimed at sending a DELETE request to localhost:3000/entities/:id, but it's not happening onclick.
– user2799827
Nov 25 '18 at 12:03
port 8080 is where the client app is being served. looks like it is retrieving the Vue favicon only, unrelated to the attempt to delete except that on clicking to Delete, the page is refreshing. Api.js combined with EntitiesService.js is aimed at sending a DELETE request to localhost:3000/entities/:id, but it's not happening onclick.
– user2799827
Nov 25 '18 at 12:03
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53460642%2fvue-js-client-rails-api-delete-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53460642%2fvue-js-client-rails-api-delete-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you please post what your network request is? Side question, what is the reason for using form requests through axios over json?
– Austio
Nov 24 '18 at 21:00
I thought axios was required since the requests are being made to a remote server separate from the client. I was following various tutorials
– user2799827
Nov 24 '18 at 22:00
You will have a much easier time on API requests if you use
jsonas the request instead of form encoded. Axios is a good client for that.– Austio
Nov 25 '18 at 3:24
Side note, that request is to port 8080 and is a get request to some express server. What you need is the request to port 3000
– Austio
Nov 25 '18 at 3:28
port 8080 is where the client app is being served. looks like it is retrieving the Vue favicon only, unrelated to the attempt to delete except that on clicking to Delete, the page is refreshing. Api.js combined with EntitiesService.js is aimed at sending a DELETE request to localhost:3000/entities/:id, but it's not happening onclick.
– user2799827
Nov 25 '18 at 12:03