vue组件获取本地json，渲染不出来的问题

Question

vue组件获取本地json，获取json什么的都没有问题，也没有报错，测试数据存放在static文件夹里

问题是json里面的数据渲染不出来，尝试过axios和jq的方法

template:

<template>
    <div>
        <div class="list">
            <ul>
                <li v-for="list in textData">
                    <h2>{{list.title}}</h2>
                </li>
            </ul>
        </div>
    </div>
</template>

js:

<script>
import axios from 'axios';
import $ from 'jquery';
export default {
    name: 'list',
    data() {
        return {
            loading: false,
            textData: {}
        }
    },
    created() {
        this.getData();
    },
    components: {
        mobileHeader
    },
    methods: {
        getData() {
            // axios.get('../../static/20190706.json', {}).then((response) => {
            //     this.textData = response.data;
            // }, response => {
            //     console.log('error');
            // });
            $.ajax({
                type: 'get',
                url: '../../static/20190706.json',
                async: true,
                success: (data) => {
                    this.textData = this.textData.concat(data.stories);
                }
            })
        }
    }
}
</script>

当然main.js里也添加了这两句

import axios from 'axios';
Vue.prototype.$http = axios;

期间看过其他人写的代码，感觉自己的思路是对的，只是不知缺少了些什么，望大神不吝赐教。

Answer 1

这个问题解决了，最后还是采用axios的方法

首先是response.data是个字符串，而且还不是json字符串，所以要把response.data用JSON.stringify()方法转换一下：
var storiesList = JSON.stringify(res.data);
然后再转为json对象：
this.textData = JSON.parse(storiesList);

axios.get('http://localhost:8080/static/20190706.json').then((res) => {
    var storiesList = JSON.stringify(res.data);
    this.textData = JSON.parse(storiesList);
    console.log(this.textData.stories);
}, res => {
    console.log('error');
});

这些都源于一个报错：Unexpected token o in JSON at position 1
参考博客：https://blog.csdn.net/qq_4199...

页面渲染的地方也不能直接是v-for="list in textData"，应该是某个键值：

<li v-for="list in textData.stories">
    <h2>{{list.title}}</h2>
</li>

或者直接在storiesList获取stories键值：

axios.get('http://localhost:8080/static/20190706.json').then((res) => {
    var storiesList = JSON.stringify(res.data);
    this.textData = JSON.parse(storiesList).stories;
    console.log(this.textData);
}, res => {
    console.log('error');
});

页面渲染地方做出的变动：

<li v-for="list in textData">
    <h2>{{list.title}}</h2>
</li>

Answer 2

你确定没有报错么 concat是数组合并的方法 this.textData:[] this.textData 直接等于 data.stories;

Answer 3

textData 是对象呀，对象没有concat方法吧

Answer 4

打印一下success返回的data，看看数据是不是真的在