Javascript 拉维公司；将vue.js值添加到数组

我在Laravel中使用vue.js

我有三张桌子

Article  
Location 
article_location (pivot table)

如果我想将位置文章转换为json，以便将其传递给vue，我该怎么做

 <div class="container">

        Location->article  //all articles of a location to json

        <template id="ln-data">
            <ul>
                <li v-for="value in list">
                    @{{ value.name }}
                </li>
            </ul>
        </template>

        <script>
        Vue.config.debug = true;

        Vue.component('data', {
            template: '#ln-data',
            props:['list'],

            created() {
                this.list = JSON.parse(this.list);
            }
        })

        new Vue({
            el: 'body'
        });
        </script>

视图：

错误：

MacroTable.php第81行中的ErrorException:方法文章没有 存在。（观点： /home/vagrant/Code/project/resources/views/locationproducts.blade.php）

您可以使用

toJson（）

方法，要将模型转换为JSON，您可以使用

toJson

方法。与

toArray

类似，

toJson

方法是递归的，因此所有属性和关系都将转换为JSON：

$location->articles()->toJson();

---

希望这有帮助。

谢谢您的回复。请看我的编辑。你知道为什么会出现这个错误吗？不客气，谷歌搜索了一下。我可以看到这个问题与表单有关，但我找不到任何快速的答案，我建议为这个问题添加另一个问题，并提供清晰的描述和更具体的代码。

  <div class="container">
            <data list="{{ $location->article()->toJson() }}"></data>
    </div>

public function article()
{
    return $this->belongsToMany('App\article','article_location');
}

$location->articles()->toJson();