vue.js當從指令

更改數據時，列表（模板）綁定不會更新首先：我使用laravel spark和給定的帶有spark的vue設置。vue.js當從指令

我有一個「自定義」道具的「家」組件。在自定義內有一個「密碼」數組。（由指令代碼添加的條目，它的初始化空）

我的組件（ALIST）應該對數據綁定

<template id="passwords-list-template"> 
    <div class="password" v-for="password in list"> 
     <ul> 
      <li>{{ password.name }}</li> 
      <li>{{ password.description }}</li> 
     </ul> 
    </div> 
</template> 

<script> 
export default { 
    template: '#passwords-list-template', 

    props: ['list'], 
}; 
</script>

使用

<passwords-list :list="custom.passwords"></passwords-list>

使用VUE devtools我可以看到我的數據正在更新，但是我的列表不是。另外，其它像綁定

<div v-show="custom.passwords.length > 0">

不工作...

UPDATE：父組件（首頁）

Vue.component('home', { 
    props: ['user', 'custom'], 

    ready : function() { 

    } 
});

使用

<home :user="user" :custom="spark.custom" inline-template>

更新2：我周圍玩一點點使用jsfiddle。看起來像使用$ root改變綁定數據對象在使用組件的方法時對我很好。但是它不工作時，試圖用一個指令

https://jsfiddle.net/wa21yho2/1/

來源

2016-05-31 Frank Provost

在父組件中的數據？ –

它只被定義爲一個道具 –

'list'是'passwords-list'的一個道具，'password-list'是一個在其他組件中定義的組件，我需要看到這個頂層組件。我真正想看到的是'custom.passwords'的定義 –

有在Vue公司的代碼有很多錯誤的訪問。首先，你的組件在哪裏是孤立的，沒有明確的父 - 子關係。第二，組件範圍中存在錯誤，你試圖在子組中設置父項的數據，並且你試圖設置一個道具的價值，道具默認只讀，你應該寫一個setter函數或將它們改爲數據。最後，我不明白爲什麼你要使用一個指令，如果有方法和事件涉及？

無論如何，我重寫了你的jsfiddle，我希望你找到你需要的東西。鏈是根>首頁>密碼列表。數據在根目錄下，但在家中進行了修改，最後一個組件只顯示它。這裏的關鍵是雙向屬性，否則你將無法通過屬性修改數據。

下面是一個代碼片段

首頁

var Home = Vue.component('home', { 
    props: { 
     user: { 
     default: '' 
     }, 
     custom: { 
     twoWay: true 
     } 
    }, 
    components: { 
     passwordList: PasswordList 
    }, 
    methods: { 
     reset: function() { 
     this.custom.passwords = []; 
     } 
    } 
}); 

// template 
<home :custom.sync="spark.custom" inline-template> 
    {{custom | json}} 
    <button @click="reset"> 
    reset in home 
    </button> 
    <password-list :list="custom.passwords"></password-list> 

    <password-list :list="custom.passwords"></password-list> 
</home>

以下是完整的如何定義jsfiddle

來源

2016-05-31 14:58:13

vue.js當從指令

回答

相關問題