Vue.js 2組件父項子項未定義

我是vue的新手，我收到錯誤referenceError: items is not defined。任何人都可以看到爲什麼發生這種情況，或者給我一些指點？Vue.js 2組件父項子項未定義

我認爲這與items有關，不是先設置模板。

我的代碼：

<div id="root"> 
    <task-list></task-list> 
    <template id="my-parent"> 
     <table> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>id</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr is="task" v-for="item in items" :item="item"></tr> 
      </tbody> 
     </table> 
    </template> 

    <template id="my-child"> 
     <tr> 
      <td></td> 
      <td>{{ item.name }}</td> 
      <td>{{ item.id }}</td> 
     </tr> 
    </template> 

</div> 
<script> 



Vue.component('task-list', { 
template: '#my-parent', 
data: function() { 
     return { 
      items: [] 
     } 
    }, 
    methods: { 
    getMyData: function(val) { 

     var _this = this; 
     $.ajax({ 
      url: 'vuejson.php', 
      method: 'GET', 
      success: function (data) { 
       console.log(data); 
       _this.items = data; 
      }, 
      error: function (error) { 
       alert(JSON.stringify(error)); 
      } 
     }) 

    } 
    }, 
    mounted: function() { 
     this.getMyData("0"); 
    } 
}); 

Vue.component('task', { 

    template: '#my-child', 
    props: ['item'], 

    data: function() { 
     return { 
      item: {} 
     } 
    } 
}); 
new Vue({ 
    el: "#root", 

}); 

</script>

來源

2017-04-19 Jim Phillips

我想你刪除了一個鏈接（url，image？）到你的代碼，因爲沒有代碼可見。不要修復鏈接，只需將代碼編寫爲純ASCII。 – Matthias

對不起，第一次使用stackoverflow –

更新了現在感謝 –

這裏正在修改後的代碼：

<template id="my-child"> 
    <tr> 
     <td>{{ item.name }}</td> 
     <td>{{ item.id }}</td> 
    </tr> 
</template> 
<template id="my-parent"> 
    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>id</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr is="task" v-for="item in items" :item="item"></tr> 
     </tbody> 
    </table> 
</template> 
<div id="root"> 
    <task-list></task-list> 
</div>

和JS：

Vue.component('task-list', { 
    template: '#my-parent', 
    data: function() { 
    return { 
     items: [] 
    } 
}, 
methods: { 
getMyData: function(val) { 

    var _this = this; 
    _this.items = [{name: '1.name', id: 1}]; 
} 
}, 
mounted: function() { 
    this.getMyData("0"); 
} 
}); 

Vue.component('task', { 

template: '#my-child', 
props: ['item'], 

data: function() { 
    return { 
    } 
} 
}); 
new Vue({ 
el: "#root", 

});

jsfiddle

這將是更容易您與VUE工作，如果你做一些教程第一:)

編輯：還有一兩件事：如果你財產申報（項目在你的情況下），不使用的數據名稱。所以，我做了什麼： - 放在模板的根元素之外 - 刪除「項」從數據

來源

2017-04-19 11:12:10 donMateo

偉大的，這是非常有意義的。孩子的數據功能根本不需要嗎？ –

@Jim Phillips是的，你可以忽略任務組件中的數據功能。 – donMateo

你應該說明的div＃根目錄之外的模板。實施例

<div id="root"> 
    <task-list></task-list> 
</div> 
<template id="my-parent"> 
     <table> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>id</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr is="task" v-for="item in items" :item="item"></tr> 
      </tbody> 
     </table> 
    </template> 

    <template id="my-child"> 
     <tr> 
      <td></td> 
      <td>{{ item.name }}</td> 
      <td>{{ item.id }}</td> 
     </tr> 
    </template>

因爲如果它們在#root它們對於它VUE實例的一部分，並且在其沒有項。

new Vue({ 
    el: "#root", 
    //no items 
});

來源

2017-04-19 11:14:30

太棒了，這解釋得很好 –

Vue.js 2組件父項子項未定義

回答

相關問題