Question

我正在尝试将字符串数组传递给道具...

<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”的“ a”。将在我的v-for循环中创建“ Attribute1”，“ Attribute3”，但是它将它作为字符数组传递给了它。 / p>

这是输出

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\
...

将字符串数组传递给道具的正确语法是什么？

Answer 1

如果您仔细阅读，实际上是在这里传递字符串：

<vue-component attributes="[Attribute0, Attribute1, Attribute2]"></vue-component>

您应该能够传递这样的字符串数组：

<vue-component :attributes="['Attribute0', 'Attribute1', 'Attribute2']"></vue-component>

Answer 2

您应该在道具前使用:，并使用引号：

<vue-component :attributes="['Attribute0', 'Attribute1', 'Attribute2']"></vue-component>

将字符串数组传递给prop vue

2 个答案: