[英]passing array of objects to a component in vue.js
我在将对象数组传递给Vue.js 2.2中的组件时遇到问题。
这是我的组件
<vue-grid :fields = "[
{name: 'Person Name', isSortable: true},
{name: 'Country', isSortable: true}]"
></vue-grid>
它无法在浏览器中呈现花括号,因此无法使用。
我尝试过在对象中不加引号"
,在fields
属性前也没有冒号:
。这些都不起作用。但是,如果我只是传递一个简单的有效字符串,我不知道为什么对象不起作用。
我发现了一个类似的问题,但针对php给出了答案。 我只需要JavaScript的解决方案。 我想对组件中的对象数组进行硬编码。
您正确传递了它。 您必须在幕后发生其他事情。 确保您的模板具有包装元素。 看到这个小提琴
<div id="vue-app">
<h2>
Vue App
</h2>
<vue-grid :fields = "[
{name: 'Person Name', isSortable: true},
{name: 'Country', isSortable: true}]"
></vue-grid>
</div>
<script id="vue-grid-template" type="text/x-template">
<div>
<h3>Grid</h3>
<div class="grid">
Fields are:
<ul>
<li v-for="field in fields">
{{field.name}} - {{field.isSortable}}
</li>
</ul>
</div>
</div>
</script>
<script>
Vue.component('vue-grid', {
props: ['fields'],
template: '#vue-grid-template'
});
new Vue({
el: '#vue-app'
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.