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

I have a set of data (todos array) that displays in my model. I am trying to have functionality on the item on the list when clicked, it grabs the forumID found in the dataset and replace the selected value with that forumID changing whenever a different item in the list is clicked. 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"><a href="" v-model="selected" @click="myMethod1()">{{item.Name}}</a>
     
    </li>

</div>

CodePudding user response：

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">
    <a href="#" @click="selected = item.ForumId, myMethod1()">{{item.Name}}</a>
  </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-

<a href="#" @click="myMethod1(item.ForumId)">{{item.Name}}</a>

And

myMethod1(forum_id) {
 var vm = this;
 vm.selected = forum_id
 // YOUR REST CODE HERE
}