VueJS-將數據發送到Vue實例以用於掛載（）

我對我的「項目」有幾個不同的清單，並使用相同的Vue實例來處理我從數據庫中獲得的這些清單。我遇到了一個問題，雖然我真的想在我的mounted()方法中使用項目的id和type清單來幫助我的控制器端點（我使用laravel，但在這裏無關）指向正確的數據庫行。VueJS-將數據發送到Vue實例以用於掛載（）

因此，例如：

HTML

<ul class="vue-checklist" data-project="16" data-type="permits"> 
</ul> 

<ul class="vue-checklist" data-project="16" data-type="walkthrough"> 
</ul>

new Vue({ 
    el: '.vue-checklist', 
    data: { 
     items: [], 
     // is there a way to trap those data attrs here? 
    }, 
    mounted : function(){ 
     // I need to a way to access the project and type data attrs. 
     this.fetchChecklist(this.project, this.type); // <- does not work 
    }, 
    methods: { 
     fetchChecklist : function(project, type){ 
     this.$http.get('{ api/path }', { project: project, type: type}).then(function(response){ 
      this.items = response.data; 
     }) 
     } 
});

再次，有沒有辦法讓data-project和data-type附着在HTML中使用，在mounted()方法。

來源

2017-06-28 Taylor Foster

您可以通過this.$el引用Vue實例的根元素。

從那裏你可以通過getAttribute()方法引用元素的屬性。

在你的情況，你可以做這樣的事情：

new Vue({ 
    el: '.vue-checklist', 
    data: { 
    items: [], 
    project: null, 
    type: null, 
    }, 
    mounted : function(){ 
    this.project = this.$el.getAttribute('data-project'); 
    this.type = this.$el.getAttribute('data-type'); 
    this.fetchChecklist(this.project, this.type); 
    }, 
    ... 
}

這還不是最直接的解決方案雖然。如果可以的話，在父元素上創建一個Vue實例並將vue-checklist定義爲一個組件將會更加清晰。這樣，你可以只從模板傳遞project和type值props到組件：

Vue.component('vue-checklist', { 
 
    template: `<ul class="vue-checklist"></ul>`, 
 
    props: ['project', 'type'], 
 
    data: { 
 
    items: [], 
 
    }, 
 
    mounted : function(){ 
 
    this.fetchChecklist(this.project, this.type); 
 
    }, 
 
    methods: { 
 
    fetchChecklist : function(project, type){ 
 
     this.$http.get('{ api/path }', { project: project, type: type}).then(function(response){ 
 
     this.items = response.data; 
 
     }) 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
})

<div id="app"> 
 
    <vue-checklist project="16" type="permits"></vue-checklist> 
 
    <vue-checklist project="16" type="walkthrough"></vue-checklist> 
 
</div>

來源

2017-06-28 13:37:46 thanksd

精彩，就像一個魅力。謝謝！ –

@TaylorFoster不客氣！看看我的編輯，我認爲這是理想的解決方案 – thanksd

VueJS-將數據發送到Vue實例以用於掛載（）

回答

相關問題