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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.