VUE获取JSON数据问题

Question

我想用vue获取json中的conversation数组中最后一项中的content的数据，但是我的方法渲染失败了，求解。

json数据部分：

{"dialogue": [
        {
            "name":"a",
            "conversation":[
                {
                    "speaker":"a",
                    "content":"小伙子"
                },
                {
                    "speaker":"b",
                    "content":"The core idea"
                },
                {
                    "speaker": "a",
                    "content": "说的不错"
                }
            ]
        },
        {
            "name":"c",
            "conversation":[
                {
                    "speaker":"c",
                    "content":"小伙子"
                },
                {
                    "speaker":"d",
                    "content":"The core idea"
                }
            ]
        }
]}

template部分:

<template>
    <div id="dialogue">
        <div id="chatcontent" v-for="thedialoge in dialogues">
            <div id="scriptbar">
            <!--下面这种写法渲染失败，什么也不显示-->
                {{thedialoge.conversation[thedialoge.conversation.length-1].content}}
            </div>
        </div>
    </div>
</template>

如果换成{{thedialoge.conversation[thedialoge.conversation.length-1]}}
则浏览器显示最后一个对象的代码
{
"speaker": "a",
"content": "说的不错"
}

script部分：

<script type="text/javascript">
    import axios from 'axios'
    export default{
        data() {
               return {
                 dialogues:[],
            }
        },
        created() {
            axios.get('static/data.json').then(response => 
                     (this.dialogues=response.data.dialogue)
                )
              }
    }
</script>

Answer 1

使用下面的方法呢？

{{thedialoge.conversation[thedialoge.conversation.length-1]['content']}}

Answer 2

dialog是不是多一个s，在v for里面

Answer 3

我试了下是可以的呀

html部分：
<div id="content">
  <template>
    <div id="dialogue">
      <div id="chatcontent" v-for="thedialoge in dialogues">
        <div id="scriptbar">
          {{thedialoge.conversation[thedialoge.conversation.length-1].content}}
        </div>
      </div>
    </div>
  </template>
</div>

js部分：
    <script src="http://dialer.cdn.cootekservice.com/web/internal/activities/js/vue.min.js"></script>
<script>
  var vue = new Vue({
    el: '#content',
    data: {
      //data
      dialogues: [
        {
          "name":"a",
          "conversation":[
            {
              "speaker":"a",
              "content":"小伙子"
            },
            {
              "speaker":"b",
              "content":"The core idea"
            },
            {
              "speaker": "a",
              "content": "说的不错"
            }
          ]
        },
        {
          "name":"c",
          "conversation":[
            {
              "speaker":"c",
              "content":"小伙子"
            },
            {
              "speaker":"d",
              "content":"The core idea"
            }
          ]
        }
      ]
    },
    created: function created() {

    },
    mounted: function mounted() {

    },
    methods: {

    }
  });
</script>