Question

我无法将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控制台中，我可以看到道具中的 data 具有对象并与对象一起排列，这些是网络列表，可以，但是data（）中的项目是空的。我不知道发生了什么

Answer 1

这将不起作用，因为在构造NetworkList组件时，数据（ networks ）仍然是一个空数组。

数据（ networks ）最终由getNetworList()中的ajax请求填充，但这要等到NetworkList组件构造好之后，因为ajax请求具有异步特性。 / p>

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

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

Vuejs，将道具传递给data（）不起作用

1 个答案: