如何将一些API数据从v-for循环保存到我的mongodb？

Question

I am looping through some API data in Vue. I want to get the value that is displayed in my braces {{ currency.description }} and post that to my db.

I have tried for example PostService.insertPost(e.target.innerHTML);

Also have tried this.$refs.criteria[0].innerHTML

When console logged it shows exactly what I need, but when posted to the db it shows null.

VUE template

<ul  v-bind:key="currency.id" ref="criteria" v-for="currency in info">
  <li id="criteria" v-on:click="apiTest" >{{ currency.description }}</li>
</ul>

JS

apiTest(e) {   
  console.log(e.target.innerHTML);
  await PostService.insertPost(e.target.innerHTML);
}

data() {
  return{
    info: [],

My goal is to get the string value of currency.description into my db, instead of it showing up as null . I am guessing it has to do with my info array in my returned data, I am not sure how to go about it though.

Answer 1

You want to make the loop on the li -element instead, and pass the description to the click function you're calling, like so:

// Template
<template>
  <ul>
    <li
      v-for="currency in info"
      v-bind:key="currency.id"
      v-on:click="apiTest(currency.description)">
      {{ currency.description }}
    </li>
  </ul>
</template>

// Method / Click function
async apiTest(description) {
  await PostService.insertPost(description);
}

Answer 2

Try using await PostService.insertPost(currency.description); in $nextTick function. I think the problem may be the delay in loading the DOM since it is looping the list items.

Answer 3

<ul>
    <li v-for="currency in info" :id="currency.id" @click="apiTest(currency)">{{ currency.description }} </li>
</ul>

apiTest: function (currency){
    //You can get the html element
    //var element = document,getElementById(currency.id)
    console.log(currency.description);
    await PostService.insertPost(currency.description);

}