Question

我正在Vue中遍历一些API数据。我想获取大括号{{ currency.description }}中显示的值，并将其发布到我的数据库中。

例如，我尝试过PostService.insertPost(e.target.innerHTML);

还尝试了this.$refs.criteria[0].innerHTML

在控制台登录时，它显示的正是我的需要，但是在发布到数据库时，它显示为空。

VUE模板

<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: [],

我的目标是将currency.description的字符串值放入数据库，而不是显示为null。我猜想这与我返回的数据中的信息数组有关，但是我不确定该如何处理。

Answer 1

您想改为在 li 元素上进行循环，然后将说明传递给您要调用的click函数，如下所示：

// 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

尝试使用await PostService.insertPost（currency.description）;在$ nextTick函数中。我认为问题可能出在DOM的加载上，因为它正在循环列表项。

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);

}

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

3 个答案: