Question

很抱歉我是vue的新手，但我必须创建SPA应用程序，所以我开始使用代码，我一直在使用外部API和axios来匹配我的.vue组件中的动态路由以获取json数据，如下所示： / p>

data () {
  return {
    post: null,
    nextPost: null,
    prevPost: null,
    total: 0,
    endpoint: 'https://jsonplaceholder.typicode.com/posts/'
  }
},
methods: {
  totalPosts (posts) {
    this.total = posts
  },
  getPost (id) {
    console.log('currentid' + id)

    axios(this.endpoint + id)
      .then(response => {
        this.post = response.data

      })
      .catch(error => {
        console.log('-----error-------')
        console.log(error)
      })
  },
  getNextPost (id) {
    if(id === this.total) {
      this.nextPost = null
    } else {
      axios(this.endpoint + (id * 1 + 1))
        .then(response => {
          console.log(response.data.id)
          this.nextPost = response.data
        })
        .catch(error => {
          console.log('-----error-------')
          console.log(error)
        })
      }
    },

现在我意识到我的应用程序必须使用多个本地json文件，其中每个文件都包含很多json对象。应用程序必须通过动态路由选择文件，然后在该文件中按ID选择对象。它也不能使用任何服务器端语言。所以我现在失去了最好的方法。

Answer 1

这更像是一个Javascript问题，而不是Vue问题。

当您的目标是从对象数组中选择一个对象时，.filter()就是您的朋友。

例如https://jsfiddle.net/jacobgoh101/1nv5cesv/3/

如果您定位的ID为3

axios.get('https://jsonplaceholder.typicode.com/posts/').then(res=>{
  const data = res.data;
    const sampleId = 3;
  const post = data.filter((obj)=>{
    return obj.id === sampleId;
  }).pop();
  console.log(post);
})

通过id vue从一个json文件中选择一个对象

1 个答案: