使用 Axios 和 VueJS 通过 id 获取数据

Posted 2023-02-22

【中文标题】使用 Axios 和 VueJS 通过 id 获取数据

【英文标题】：Get data by id using Axios and VueJS

【发布时间】：2019-04-19 01:55:57

【问题描述】：

我的服务器端有这个 get 函数，我想通过将 ID 作为参数来获取数据库中的特定条目。在我的 VueJS 应用程序中，我编写了一个 Axios get-call，但它没有给我任何数据。它只说

“无法获取...”。

我知道我为函数提供的 ID 是正确的，所以这不是问题。

客户端：

loadData() 
     axios.get('http://localhost:8080/route', 
        params: 
            id: this.selectedRoute
        
     )
     .then(response => (this.chosenRoute = response.data));

服务器端：

app.get('/route/:id', function(req, res) 
    const routeId = req.params.id;
    Route.findById(routeId, (err, route) => 
        res.set("Access-Control-Allow-Origin", "*");
        res.json(route);
    );
);
    enter code here

【参考方案1】：

通过将id（即this.selectedRoute）连接到url 来尝试类似的操作：

  loadData() 
     axios.get('http://localhost:8080/route/'+ this.selectedRoute)
              .then(response => (this.chosenRoute = response.data));

在你的最后一个问题中，你有这个：

      <select name="routeSelect" v-model="selectedRoute">
          <option v-for="routes in result" v-bind:key="routes.name" v- 
           bind:value="routes.name">  routes.name  </option>
      </select>

这不起作用，因为 selectedRoute 是路线 name 不是 id 来解决你必须这样做：

          <option v-for="routes in result" v-bind:key="routes.name" v- 
           bind:value="routes.id" >...

通过将选择选项 value 绑定到 路由 id

【讨论】：

我已经将 v-bind:value 更改为 id 而不是名称，所以这不是问题。但是，您将 id 连接到 url 的第一个建议奏效了。谢谢！

不客气，通常我更喜欢将值绑定到对象，在这种情况下绑定到路由项