Array items vuejs as one

Question

I have the following table

<table class="table-auto w-full">
  <tbody>
    <tr v-for="items in planItems" :key="items.id">
      <td class="border px-4 py-2">{{ items }}</td>
    </tr>
  </tbody>
</table>

I'm looping through all items, I have the following

<script>
export default {
  name: "PlanItem",
  props: {
    planIcon: {
      type: String,
      required: false
    },
    planIconAlt: {
      type: String,
      required: false
    },
    planName: String,
    planPrice: String,
    items: Array,
    planOrderLink: String
  },
  data() {
    return {
      planItems: this.items
    };
  }
};
</script>

and doing the following when I pass the component items="[1GB]" , however, my output is this

What am I doing wrong?

Answer 1

try :items="['1GB']" instead

Explanation: Your property is interpreted as a string, and not an array

Use : or v-bind: to use an array (or anything that isn't a static string) as a property

Answer 2

It is being treated as a string, and then is iterating over the characters of the string. You have to use bind for it to execute it as Javascript, and your Javascript syntax is incorrect.

v-bind:items="['1GB']"

v-bind:items="['1GB','2GB','3GB']"