我有一些vue.js組件，所有這些組件都從外部獲取它們的數據。Vue.js - 如何通過屬性爲組件設置多個值（數組）？

例子：

這個偉大的工程，到目前爲止，但現在我要在屬性設置多個值。

這不起作用：

<vue-list items="['Entry1', 'Entry2']"></vue-list>

我怎樣才能過一個屬性設置多個值嗎？

更新

我有一個工作的例子，但我不知道如果多數民衆贊成以正確的方式去，但它的工作原理。如果有人知道更好的方式，我會很高興，如果你與我/我分享。

這是我如何調用該組件：

<vue-list times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

這是組件的代碼：

<template> 
    <div> 
     <div v-for="item in timesArray"> 
      <span v-html="item"></span> 
     </div> 
    </div> 
</template> 

<script> 
export default { 
    props: ['times'], 
    data: function() { 
     return { 
      timesArray: [], 
     } 
    }, 
    created: function() { 
     this.timesArray = JSON.parse(this.times); 
    } 
} 
</script>

來源

2017-03-05 TatzyXY

只需使用：items或v-bind：項目。 – Bert

使用屬性綁定語法。

<vue-list :times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

注意在:times前面的冒號。你不需要解析或使用數據。

來源

2017-03-05 16:40:57 Bert

這是不是因爲你錯過了關閉輸入2串？

<vue-list items="['Entry1', 'Entry2]"></vue-list>

正確的代碼是

<vue-list items="['Entry1', 'Entry2']"></vue-list>

認爲它應該工作，如果該組件的邏輯是好的。

來源

2017-03-05 15:13:51

沒關係，謝謝你的糾正。這只是在stackoverflow上的一個錯字。它總是以字符串的形式出現在組件中，而不是數組。 – TatzyXY

您必須僅使用vue實例變量傳遞它，請參閱此fiddle。

<div id="app"> 
    <child :items="items"></child> 
</div>

凡在項目定義爲VUE實例數據：

new Vue({ 
    el: '#app', 
    data: { 
    full_name: "Initial Val", 
    items: ['Entry1', 'Entry2'] 
    } 
})

來源

2017-03-05 16:02:58 Saurabh

但是，如果我使用數據，我不能從外面設置它作爲屬性。 – TatzyXY

Vue.js - 如何通過屬性爲組件設置多個值（數組）？

更新

回答

相關問題