VueJS - 在輔助.js文件中定義組件

我有這種情況：我有一個不是SPA的Laravel應用程序。但我在我的應用程序的許多組件中使用Vue，使用單個文件組件以及所有這些組件。VueJS - 在輔助.js文件中定義組件

但我有一些組件，我只想在某些頁面加載，出於性能原因。但是，當我註冊在第二.js文件的組成部分，我總是得到這樣的錯誤：

Property or method "addresses" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in)

我的結構是這樣的：

app.js

window.Vue = require('vue'); 
import ModalMessage from './../components/ModalMessage.vue'; 
import FlashMessage from './../components/FlashMessage.vue'; 

window.MainVue = new Vue({ 
    el: '#app', 

    data: { 
     loading: false 
    }, 

    components: { ModalMessage, FlashMessage } 
});

所有這些工作都非常好。但是當我介紹一個新的.js文件時，我總是得到上面提到的錯誤。

例子：

account.js

window.UserAddresses = new Vue({ 
    el: '#user-addresses', 

    data: { 
     addresses: [] 
    }, 

    methods: { 

    } 
});

爲#user-addresses的HTML是：

<div id="user-addresses"> 
    <table class="table"> 
     <tr v-for="address in addresses"> 
      <td>testing</td> 
     </tr> 
    </table> 
</div>

，我總是得到錯誤：

Property or method "addresses" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in)

在生成錯誤此內部頁面，我的JS文件都包含這樣的：

<script src="assets/js/app.js"></script> 
<script src="assets/js/account.js"></script>

的account.js Vue的實例之前安裝生成錯誤。

我的問題是：是否有一種方法可以在多個.js文件中使用Vue？我也不想在我的根Vue實例中聲明所有的子組件數據。

有沒有辦法讓這項工作？

UPDATE

我使用的WebPack編譯所有文件。

來源

2017-03-06 Luis Dalmolin

是你，包括腳本中的所有問題的文件是如何被包含只是添加在HTML文件中 –

您VUE實例。 –

在其他腳本文件中包含額外的Vues應該沒有問題，所以其他事情在這裏進行。是否有可能'＃user-addresses'在MainVue的模板中？ – Bert

一般而言，您的頂級示例看起來恰到好處，沒有什麼我會看不到順序。雖然你用地址描述的問題可能來自你如何使用UserAddresses。我想你會把它嵌套在頁面上的#app元素中。這裏的問題是，你不能在對方嵌套兩個Vue根實例。

new Vue({...}) // get a Vue rootinstance

你可能想要做的是使用一個組件。您可以爲此使用全局組件，因此可以有一個全局根實例。

window.UserAddresses = Vue.component('user-addresses', { 
    data() { 
    return { 
     addresses: [] 
    } 
    } 
    ... // rest of your component code 
}

你可以在這裏得到更多的信息：https://vuejs.org/v2/guide/components.html

來源

2017-03-06 18:42:52 Codebryo

使用像這樣的'Vue.component（'user-addresses'，require（'./../../ components/UserAddresses'））;'，在一個單獨的JS文件中，我得到這個錯誤：「Unknown custom element ：<用戶地址>「。 PS：我正在使用webpack。 –

和UserAddresses在這種情況下是一個簡單的對象？確保它有一個'模板'並且保存並添加'name'屬性。 – Codebryo

在這種情況下，UserAddresses是一個'.vue'文件，我也使用vue加載器與webpack。 –

VueJS - 在輔助.js文件中定義組件

回答

相關問題