Being new to Vue.js, I have a question on how to efficiently handle data retrieval from my backend application. Here is the code snippet that fetches all the data:
var app2 = new Vue({
delimiters: ['%%', '%%'],
el: '#app2',
data: {
articles: []
},
mounted : function()
{
this.loadData();
},
methods: {
loadData: function() {
this.$http.get('/backend/FpArticle/articleApi').then(response => {
// get body data
this.articles = response.body;
}, response => {
// error callback
});
},
},
The above code seems straightforward enough. Now, to display the retrieved data in a table view on the frontend, I use the following code:
<tr v-for="article in articles">
<td>{{ article.name }}</td>
</tr>
This method works well. However, I want to implement an edit feature where users can modify certain data elements of an article. My initial thought process for achieving this is as follows:
<tr v-for="article in articles">
<td>{{ article.name }}</td>
<td><a href="/article/{{ article.id }}">edit</a></td>
</tr>
To implement this functionality, I believe I need another component that will take the article id, retrieve the corresponding data, display it in a form, and handle the save event. While I have some ideas on how to handle the latter part, I am unsure about how to approach routing with a new component in Vue.js. I was considering something like this:
<tr v-for="article in articles">
<td>{{ article.name }}</td>
<td><button v-on:click="editArticle(article.id)">edit</button></td>
</tr>
If anyone has any helpful tips or recommendations on the best way to achieve this functionality, I would greatly appreciate it! Thank you!