Using props, how to get the array values inside of .js file in Vuejs?
Solution 1:
So, there's a couple of things wrong with your code.
First of all, you do not need to use props if you are loading the data from a file. Also the props are used to pass data to the component (e.g. <hello-world :fruits="fruitsdata">.
Next problem is with your import statement. Because you are exporting a const you need to wrap fruitsdata in curly braces to import that variable correctly.
I've edited your code and it should work (not tested).
export const fruitsdata = [
{
id: "1",
fruit: "freshapples",
value: "3"
},
{
id: "2",
fruit: "Notfreshapples",
value: "1"
},
{
id: "3",
fruit: "freshmangoes",
value: "3"
},
{
id: "4",
fruit: "Notfreshmangoes",
value: "1"
}
];<template>
<div>
<div v-for="fruit in fruits" :key="fruit.id">
{{ fruit.fruit }}: {{ fruit.value }}
</div>
</div>
</template>
<script>
import { fruitsdata } from "../fruitsdata";
export default {
name: "HelloWorld",
data() {
return {
fruits: fruitsdata,
};
},
};
</script>