How do I loop an non-reactive array in Vue template without putting it in data property or computed property?

Question

I have a static array data like this

const names = ["Amy", "Joseph", "Hank"];

I want to loop them in my markup, in React, I can simply do this:

import React, { memo } from "react";

// these guys are static values!
const names = ["Amy", "Joseph", "Hank"];

const App = () => (
  <div>
    {names.map(name => ( // render once and no more!
      <span key={name}>{name}</span>
    ))}
  </div>
);

export default memo(App); // won't re-render anymore!

But in Vue, the only way I can think of is doing this:

<template>
  <div>
    <span v-for="name in names" :key="name">{{ name }}</span>
  </div>
</template>

<script>
const names = ["Amy", "Joseph", "Hank"];

export default {
  data() {
    return {
      names // I have to put these guys in data property, now it becomes reactive, I don't want this. Although this will only render once.
    };
  }
};
</script>

I have to put my names in data() or computed properties, but this will cause them to be reactive, is there any other way to do this?

@ZohaibIjaz because this will cause names to have getters and setters, which makes javascript doing none necessary things. — Joseph, Jan 24 '20 at 16:10
I think this is a duplicate. https://stackoverflow.com/a/45815401/9236687 — Eric, Jan 24 '20 at 16:13
[This post](https://github.com/vuejs/vue/issues/2637#issuecomment-207076744) might also help. — Yom T., Jan 24 '20 at 16:35

score 2 · Accepted Answer · answered Jan 24 '20 at 16:14

You can create a custom option like so

export default {
  data() {
    return {
      //your reactive thins here
    };
  }
  names : ["Amy", "Joseph", "Hank"],
  .......
};

And finally in your template you can iterate over it like

<template>
  <div>
    <span v-for="name in $option.names">{{ name }}</span>
  </div>
</template>

How do I loop an non-reactive array in Vue template without putting it in data property or computed property?

1 Answers1