0

次のような親コンポーネントがあります

<template>
        <div class="row">
            <mappings mapping-list="{{currentMappings}}"></mappings>
        </div>
</template>

<script>
    import Mappings from './content/Mappings.vue';

    export default {
      data () {
       return {
         currentMappings: Array
       }
      },
      created () {
        this.readData();
      },
      methods: {
        readData () {
            this.$http.get('data/Books.xml').then((response)=> {
                var x2js = new X2JS();
                var jsonObj = x2js.xml_str2json( response.body );
                this.getMappings(jsonObj.WAStatus);
            });
        }, 
        getMappings (jsonObj) {
            this.currentMappings = jsonObj.WSSMappings;
        }
      },
      components: { Mappings }
    };
</script>

次のような子「マッピング」コンポーネント

<template>
        <div class="col-lg-4">
            <div class="hpanel stats">
                <div class="panel-body h-200">
                    <div class="stats-title pull-left">
                        <h3>Mappings</h3>
                    </div>
                    <div class="stats-icon pull-right">
                        <img src="images/mappings.png" class="browserLogo">

                    </div>
                    <div class="m-t-xl">
                        <table class="table table-striped table-hover">
                                <tr v-for="mapping in mappingList ">
                                    <td>name - {{$index}}</td>
                                </tr>
                        </table>
                    </div>
                </div>
                <div class="panel-footer">
                    Current WSS - SA Mappings
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: {
            mappingList:Array
        },
        created () {
            console.log(this.mappingList);
            // console.log(this.$parent.mappings);
        }
    }
</script>

親コンポーネントから子コンポーネントにデータを渡すことができません。ここで小道具を使用しようとしています。私が得ているエラーは

main.js:2756[Vue warn]: Invalid prop: type check failed for prop "mappingList". Expected Array, got String. (found in component: <mappings>)

更新 提案に従って、次のように親コンポーネントを更新しました

<template>
        <div class="row">
            <browser-stats></browser-stats>
        </div>
        <div class="row">
            <mappings :mapping-list="currentMappings"></mappings>
        </div>
</template>

<script>

    import Mappings from './content/Mappings.vue';

    export default {
      data () {
       return {
         currentMappings: []
       }
      },
      created () {
        this.readData();
      },
      methods: {
        readData () {
            this.$http.get('data/WA_Status.xml').then((response)=> {
                var x2js = new X2JS();
                var jsonObj = x2js.xml_str2json( response.body );
                this.getMappings(jsonObj.WAStatus);
            });
        }, 
        getMappings (jsonObj) {
            this.currentMappings = jsonObj.WSSMappings;
         console.log(this.currentMappings.length);
        console.log(JSON.stringify(this.currentMappings));
        }
      },
      components: {  Mappings }
    };
</script>

および子の「マッピング」コンポーネントは次のとおりです

<template>
        <div class="col-lg-4">
            <div class="hpanel stats">
                <div class="panel-body h-200">
                    <div class="stats-title pull-left">
                        <h3>Mappings</h3>
                    </div>
                    <div class="stats-icon pull-right">
                        <img src="images/mappings.png" class="browserLogo">

                    </div>
                    <div class="m-t-xl">
                        <table class="table table-striped table-hover">
                                <tr v-for="mapping in mappingList ">
                                    <td>{{mapping._name}}</td>
                                </tr>
                        </table>
                    </div>
                </div>
                <div class="panel-footer">
                    Current WSS - SA Mappings
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: {
            mappingList:[]
        }
    }
</script>

しかし、私は空のmappingListを取得しています。これは、私がやっているときはいつでもconsole.log(this.currentMappings.length);未定義になることを意味します..ここで何が間違っているのか教えてください。

ありがとう

4

2 に答える 2

2

1) 拳の問題

  data () {
   return {
     currentMappings: Array
   }

する必要があります

  data () {
   return {
     currentMappings: []
   }

2) 第二号

<mappings mapping-list="{{currentMappings}}"></mappings>

次のようにする必要があります。

<mappings :mapping-list="currentMappings"></mappings>

3) 第三号

    created () {
        console.log(this.mappingList);
        // console.log(this.$parent.mappings);
    }

これは毎回空の配列を返します。mappingListAJAX経由で変更され、created()呼び出された後に発生したためです。より良いデバッグ体験のためにvue-devtool(chrome プラグイン)を使用してみてください。

更新: 非同期の変更 (AJAX で行われたものなど) を監視できるようにするには、次のwatch方法を使用することを検討してください。

{
   data(){ 
      //..
   },
   watch:{
      'currentMappings'(val){
          console.log('currentMappings updated', currentMappings);
      }
   }
}

ドキュメントはこちら.

于 2016-06-26T08:03:22.737 に答える
1

文字列補間 ( {{ }}) を使用して、データを prop に渡そうとしますが、補間によって配列が文字列に変換されます。

とのバインディングを使用する必要がありますv-bind

<mappings v-bind:mapping-list="currentMappings"></mappings>
...short form:
<mappings :mapping-list="currentMappings"></mappings>
于 2016-06-26T07:51:57.910 に答える