在prop循環中觀察父項並不更新

我有2個組件 - <my-component>和<grand-child-comp>。在prop循環中觀察父項並不更新

在我的根目錄中有一個多維對象，我的組件用prop來觀察它。

<div id="app"> 
    <my-component v-bind:account-types='accountTypes'> 
    </my-component> 
</div>

在Vue調試器中，我可以看到my-component正在獲取並正在監視accountTypes對象。但是，當試圖在my-component's模板中使用它時，它不起作用。

Vue.component('my-component', { 
    template: ` 
     <div> 
      <grand-child-comp v-for="(account, index) in accountTypes" :key="index"></grand-child-comp> 
     </div> 
    ` 
}

最後，accountTypes物體看起來像：

{ 1 : [ 'a', 'b', 'c' ], 2: ['e', 'a', 'm'] }

來源

2017-08-02 senty

特別是你的小提琴，你正在'accountTypes'不正確地傳遞給'my-component'。 https://jsfiddle.net/50wL7mdz/51204/ – Bert

啊。我發現了這個問題。它與初始化根中的accountTypes有關。我正在使用'accountTypes：{}'。我試圖把預定義的值，它的工作 – senty

-1

的問題是，你正在做的v-for，並在同一時間對同一元素傳遞的屬性。您需要將它們嵌套，以便v-for所在的元素包裝<grand-child-comp>。 The documentation recommends a template for this。

<template v-for="(account, index) in accountTypes"> 
    <grand-child-comp :key="index"></grand-child-comp> 
</template>

UPDATE：根據你在你的意見，說什麼這聽起來像你真正需要的是兩個嵌套的for循環。

<!-- loop over account types --> 
<div v-for="(accountId, values) in accountTypes"> 
    <h3>{{ accountId }}</h3> 
    <!-- then loop over each individual value --> 
    <ul v-for="value in values">{{ value }}</ul> 
</div>

您不需要使用組件。只有在您計劃在應用程序周圍的多個位置使用某些內容時才需要組件。僅僅因爲for循環多次重複相同的元素並不意味着你實際上需要一個組件; for循環中的模板就足夠了。

來源

2017-08-02 21:47:22 Soviut

有沒有辦法保持對象的想法？這些密鑰暗示帳號和數組是每個帳戶的值：/ – senty

我更新了我的答案，因爲問題不在於您的數據結構，而是您的for循環和鍵分配位於同一元素上。 – Soviut

我很困惑。我準備了一個小提琴。我想要實現的是循環遍歷每個數組值，但同時知道他們的鍵 – senty

在prop循環中觀察父項並不更新

回答

相關問題