我有一些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 - 如何通过属性为组件设置多个值（数组）？

更新

回答

相关问题