时间戳

首页 > 解决方案 > 如何将一些 API 数据从 v-for 循环保存到我的 mongodb？

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

问题描述

我正在循环浏览 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. 我猜这与我返回的数据中的信息数组有关，但我不知道该怎么做。

标签： javascriptmongodbvue.js

解决方案

您想在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);
}

推荐阅读