Question

在一个.vue文件中，我正在尝试从axios get响应结果（位于嵌套数组中）中获取get值。代码类似于下面的示例（没有用于查询的搜索表单）。

<div class="results" v-if="results">
  <p>{{ results }}</p>
  <p>{{ result }}</p>
</div>

<script>
import axios from 'axios';
export default {
  name: 'search',
  data () {
    return {
      query '',
      results: '',
      result: ''
    }
  },
  methods: {
    getResults(query) {
      axios.get('https://apiexample.com/api/search.php?t_id=' + query).then( response => {
          this.results = response.data.items;
          this.result = response.data.items[0]['1:B'];
      });
    }
  }
}

因此，结果得到类似

[{"1:A":10,"1:B":20,"1:C":30,"1:D":40,"1:E":50},
{"1:A":20,"1:B":30,"1:C":40,"1:D":50,"1:E":60},
{"1:A":30,"1:B":40,"1:C":50,"1:D":60,"1:E":70},
{"1:A":40,"1:B":50,"1:C":60,"1:D":70,"1:E":80}]

对于this.result，当我尝试获取20的值时，我变得不确定。可能是错误地导航了这种类型的响应，或者可能需要在data（）{}中添加一些更具体的内容？

任何帮助将不胜感激。

谢谢。

Answer 1

如注释中所述，response.data.items是字符串，而不是对象。这似乎是一个有缺陷的API响应，items在响应内不必要地编码为JSON字符串。

但是，假设无法在服务器中解决问题，可以在UI中对items进行解码：

this.results = JSON.parse(response.data.items);
this.result = this.results[0]['1:B'];

Axios请求从Vue中的嵌套数组获取值

1 个答案: