Vuejs，将道具传递给 data() 不起作用答案

【问题标题】：Vuejs, passing props to data() doesn't workVuejs，将道具传递给 data() 不起作用
【发布时间】：2018-06-22 19:12:05
【问题描述】：

我无法将 props 传递给 data() 也不知道为什么，我有一个内联模板：

<network-index inline-template>
...
<network-list :data="networks"></network-list> 
...
</network-index>

在 vue 文件 Index.vue 我有这个：

import NetworkList from './List.vue';

export default{

components : {NetworkList},

data(){
            return {
                networks: []                
            }
        },

created(){          

      this.getNetworList();            

   },

 methods:{

      getNetworList(){

              axios.post('/network/ajax').then(response => {
                    this.networks = response.data.list;                                            
                });  

      }

    }
}

这是 List.vue，问题出在这里：

<template>      
    <div class="network-list">        
        <div class="row row-list" v-for="(network,index) in items" >
            <network-item :data="network" @deleted="remove(index)"></network-item>            
        </div>
    </div>                                  
</template>

<script>

import NetworkItem from './Item.vue';

    export default{

        props : ['data'],

        components: {NetworkItem},

        data(){
            return {       
                items: this.data
            }
        },
        /*
        mounted(){
            this.items = this.data;
        },
        created(){

            this.items = this.data;
        },*/
        methods:{
            remove(index){                              
                this.items.splice(index,1);
            }
        }
    };
</script>

在 vue 控制台中，我可以看到 props 中的 data 有对象数组，这些是网络列表，没关系，但是 data() 中的 items是空的。我不知道发生了什么。

【问题讨论】：

尝试道具：['networks']
为什么不直接将 ajax 请求移动到 NetworkList 组件？
我也会尝试这个选项。谢谢。
我只是将 ajax 请求移动到 NetworkList 并且它也在工作。谢谢。

标签： javascript laravel vue.js

【解决方案1】：

这不起作用，因为在构建 NetworkList 组件时，数据 (networks) 仍然是一个空数组。

数据 (networks) 最终由 getNetworList() 中的 ajax 请求填充，但由于 ajax 请求的异步性质，这要等到构造 NetworkList 组件之后。

您需要设置一个手表，以便在数据更改时更新项目。

watch: {
   data(val) {
     this.items = val;
   }
}

【讨论】：