javascript - 将字符串数组传递给 prop vue
问题描述
我正在尝试将字符串数组传递给道具...
<vue-component attributes="[Attribute0, Attribute1, Attribute2]"></vue-component>
这是我的组件
<template>
<div id="app">
<ul class="content" v-bind:style="{ display: computedDisplay }" >
<li v-for="(attribute, index) in Attributes" v-bind:key="attribute">{{index}} + " " + {{attribute}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
props: {
elementName: {
type: String,
required: true
},
Attributes: {
type: Array,
required: false
}
},
</script>
我所期望的是三个元素“Attribute0”。“Attribute1”,“Attribute3”将在我的 v-for 循环中创建,但是它将我传递的内容视为一个字符数组......
这是输出
0 + " " + [
1 + " " + A
2 + " " + t
3 + " " + t
4 + " " + r
5 + " " + i
6 + " " + b
7 + " " + u
8 + " " + t
9 + " " + e
10 + " " + 0
11 + " " + ,
12 + " " +
13 + " " + A
14 + " " + t\
...
将字符串数组传递给道具的正确语法是什么?
解决方案
如果您仔细阅读,您实际上在这里传递了一个字符串:
<vue-component attributes="[Attribute0, Attribute1, Attribute2]"></vue-component>
您应该能够像这样传递一个字符串数组:
<vue-component :attributes="['Attribute0', 'Attribute1', 'Attribute2']"></vue-component>
推荐阅读
- django - django queryset 将外键对象输出到 ModelChoiceField
- statistics - 统计测试:(感知;实际结果;以及下一步)如何相互作用?
- azure - 防伪令牌和资源不可用
- azure - 如何动态地将参数传递给由 Azure 中带有以太坊连接器的逻辑应用程序调用的函数?
- r - 是否有用于比较 data.frame 中的行的 R 函数?
- reactjs - 反应:TypeError:无法读取未定义的属性“原型”
- reactjs - 如何在反应中在客户端显示动态获取的图像?
- excel - 使用 xlUp 将适当的大小写设置为范围
- rx-java2 - 为什么 Observable.subscribe() 会抛出 NullPointerException?
- azure-functions - 带有 IoT 中心触发器的 Azure 函数获取发送设备