vuejs ajax request using a v-model in a v-for - arrays

Question

I have a set of data (todos array) that displays in my model, and I am rendering this data in a list.
I am trying to implement a functionality on the list that whenever click on any item on the list, the selected variable's value should be updated with that item'sforumID, and whenever a different item is clicked the selected variable should update accordingly.
I tried adding a v-model, but that breaks. So need some direction on how can I achieve this.
new Vue({
el: "#app",
data: {
myId:"",
selected:"",
todos: [{"ForumId":41830,"Name":"test","Description":{"Text":"","Html":""},"ShowDescriptionInTopics":false,"AllowAnonymous":false,"IsLocked":false,"IsHidden":false,"RequiresApproval":false,"MustPostToParticipate":false,"DisplayInCalendar":false,"DisplayPostDatesInCalendar":false,"StartDate":null,"EndDate":null,"PostStartDate":null,"PostEndDate":null,"StartDateAvailabilityType":null,"EndDateAvailabilityType":null},{"ForumId":41863,"Name":"new forum","Description":{"Text":"","Html":""},"ShowDescriptionInTopics":false,"AllowAnonymous":false,"IsLocked":false,"IsHidden":false,"RequiresApproval":false,"MustPostToParticipate":false,"DisplayInCalendar":false,"DisplayPostDatesInCalendar":false,"StartDate":null,"EndDate":null,"PostStartDate":null,"PostEndDate":null,"StartDateAvailabilityType":null,"EndDateAvailabilityType":null}]
},
methods: {
myMethod1() {
var vm = this;
$.ajax({
url: "https://example.com/" + vm.myId +"/blogs/"+selected+"/topics/",
type: 'Get',
headers: {
accept: "application/json;odata=verbose"
},
success: function (data) {
console.log(data);
vm.Topics=data
}
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<li v-for="(item, index) in todos">{{item.Name}}
</li>
</div>

Answer 1

We can use the v-model directive to create two-way data bindings on form input, textarea, select elements, and custom components.
The following error in your code also proves the above definition.
<a v-model="selected">: v-model is not supported on this element type.
If you are working with contenteditable, it's recommended to wrap a
library dedicated to that purpose inside a custom component.
Now, as you said, " item on the list when clicked, grabs the forumID found in the dataset and replaces the selected value with that forumID changing whenever a different item in the list is clicked"
This simply stated that you only want to update the selected variable with the currently clicked item's forumID which directly means-
no two-way-binding is required == no v-model is required.
So, why not use only a click event to update the selected variable?
Below is the demo in which when you click on any list item, the selected variable will update with that item's forumID.
new Vue({
el: "#app",
data() {
return {
myId: "",
selected: "",
todos: [{
ForumId: 41830,
Name: "test",
Description: {
Text: "",
Html: ""
},
ShowDescriptionInTopics: false,
AllowAnonymous: false,
IsLocked: false,
IsHidden: false,
RequiresApproval: false,
MustPostToParticipate: false,
DisplayInCalendar: false,
DisplayPostDatesInCalendar: false,
StartDate: null,
EndDate: null,
PostStartDate: null,
PostEndDate: null,
StartDateAvailabilityType: null,
EndDateAvailabilityType: null,
},
{
ForumId: 41863,
Name: "new forum",
Description: {
Text: "",
Html: ""
},
ShowDescriptionInTopics: false,
AllowAnonymous: false,
IsLocked: false,
IsHidden: false,
RequiresApproval: false,
MustPostToParticipate: false,
DisplayInCalendar: false,
DisplayPostDatesInCalendar: false,
StartDate: null,
EndDate: null,
PostStartDate: null,
PostEndDate: null,
StartDateAvailabilityType: null,
EndDateAvailabilityType: null,
},
],
};
},
methods: {
myMethod1() {
var vm = this;
$.ajax({
url: "https://example.com/" + vm.myId + "/blogs/" + vm.selected + "/topics/",
type: 'Get',
headers: {
accept: "application/json;odata=verbose"
},
success: function(data) {
console.log(data);
vm.Topics = data
}
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<div style="margin-bottom:20px;">Click on any item</div>
<li v-for="(item, index) in todos" :key="index">
{{item.Name}}
</li>
<div v-if="selected" style="margin-top:20px;">
Updated selected variable - {{selected}}
</div>
</div>
Try this also-
I called two actions together on the anchor tag's click, First, update the selected variable, and second, call myMethod1 function.
You can also call myMethod1 and pass forumId to it and update the selected variable inside it-
{{item.Name}}
And
myMethod1(forum_id) {
var vm = this;
vm.selected = forum_id
// YOUR REST CODE HERE
}