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
– Joseph, Commented Jan 24, 2020 at 16:10
I think this is a duplicate. stackoverflow.com/a/45815401/9236687 — Eric
– Eric, Commented Jan 24, 2020 at 16:13

Risalat Zaman · Accepted Answer · 2020-01-24 16:14:12Z

2

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>

answered Jan 24, 2020 at 16:14

Risalat Zaman

1,3871 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related