Question

我需要一些有关如何使用VueJS处理单页应用程序逻辑的帮助。这对我来说很难解释，所以希望我能做到最好：

我有一个通过Axios进行API GET请求的模板/组件，如下所示：

名为“相似实体”的组件

<template>
    <div v-if='gde.length > 0'>
        <h4>Similar Entitie(s)</h4>
      <ul>
        <li v-for='item in gde'>
            <a href='#'>{{item['Similar Entities']}}</a>
        </li>
      </ul>
    </div>
</template>

<script>
import axios from 'axios';
import api from '@/api.js';

export default {
  name: 'SimilarEntities',
  data: function() {
    return {
      gde: []
    };
  },
  created: function() {
    axios
      .get(api.getSimilarEntities + this.$route.params.ID)
      .catch(error => {
        console.log(error);
      })
      .then(response => {
        this.gde = response.data;
      });
  }
};
</script>

上面的模板返回带有项目符号列表的HTML，如下所示：

建筑物
加强型飞机掩体

（gde对象看起来像这样）

[  
   {  
      "ID":100,
      "Name":"Aircraft Hangar",
      "Similar Entities":"Building"
   },
   {  
      "ID":100,
      "Name":"Aircraft Hangar",
      "Similar Entities":"Hardened Aircraft Shelter"
   }
]

上述“相似实体”组件是较大模板的一部分（它是较大模板的一部分！），该模板使用另一个Axios.get请求来填充产品详细信息页面，如下所示：

名为“外观”的组件

<template>
    <div>
        <div>
       <p>INfo about this product</p>
        <ul>
        <li v-for='item in ga'></li>
        </ul>
        <similar-entities></similar-entities>
       </div>

      </div>
</template>

<script>
import axios from 'axios';
import api from '@/api.js';
import SimilarEntities from '@/components/SimilarEntities.vue';

export default {
  name: 'Appearance',
  components: {
    SimilarEntities
  },
  data: function() {
    return {
      ga: []
    };
  },
  created: function() {
    axios
      .get(api.getAppearance + this.$route.params.ID)
      .catch(error => {
        console.log(error);
      })
      .then(response => {
        this.ga = response.data;
      });
  }
};
</script>

上面的“外观”模板返回HTML，如下所示：

外观

飞机机库是存放飞机的地方。...等等等等

-建筑

-加固的飞机掩体

总体而言，具有路由器信息的单页组件的$ route.params对象如下：

   {  
      "ID":100,
      "Name":"Aircraft Hangar"
   }

问题是我无法弄清楚如何将“相似实体”组件中的“相似实体”项（在本例中为Building和Hardened Aircraft Shelter）超链接到它们各自的产品详细信息页面，不包含其关联的ID。

注意：我可以使用一个名为getNames的终结点，其中包含所有产品的产品名称（包括我们的Building和Hardened Aircraft Shelter的名称）产品）包含以下数据：

{  
      "ID":100,
      "Name":"Aircraft Hangar"
},
{
      "ID": 101,
      "Name": "Building"
},
{
       "ID": 102,
       "Name": "Carport"
}
...snip

我应该将getNames api置于某种全局状态吗？然后，通过$ route.params对象，我可以获取名为Name的键，然后以某种方式查看getNames对象的全局状态，并将Name动态绑定到“相似实体”组件的超链接元素？这样，Building组件中的Hardened Aircraft Shelter和Similar Entities链接就被链接了吗？我要做的就是让用户单击Similar Entities链接（在此演示中为Building或Hardened Aircraft Shelter）中，进入正确的产品页面。

感谢任何提示。我可能对此太想了。...

如何使用VueJS在多个API之间进行查询？

0 个答案: