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">
freshapples: {{ fruit.value }} Notfreshapples{{ fruit.value }}
freshmangoes:{{ fruit.value }} Notfreshmangoes:{{ fruit.value }}
</div>
</div>
</template>
<script>
import fruitsdata from "../fruitsdata";
export default {
name: "HelloWorld",
data() {
return {
data: fruitsdata,
};
},
props: {
fruitsdata: {
required: true,
type: Object,
},
},
};
</script>I am trying to get data from "fruitsdata.js" file and bind the data in the html. But not sure, what's wrong. unable to use the get the data from .js file??
Error i am getting now is:-
[Vue warn]: Missing required prop: "fruitsdata"
[Vue warn]: Property or method "fruits" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
code:- https://codesandbox.io/s/magical-boyd-m3ib6?file=/src/fruitsdata.js
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>just change
import fruitsdata from "../fruitsdata"
to
import { fruitsdata } from "../fruitsdata";
and
data() {
return {
data: fruitsdata,
};
}
to
data() {
return {
fruits: fruitsdata,
};
}
Here you are importing data from a javascript file passing the props remove the props and use the data value like below and Also destruct fruits data since you have used default keyword while you exported the fruitsdata
<template>
<div>
<div v-for="fruit in fruits" :key="fruit.id">
<p v-if="fruit.fruit==="freshapples">freshapples: {{ fruit.value }}</p>
<p v-if="fruit.fruit ==="Notfreshapples">Notfreshapples: {{ fruit.value }}</p>
<p v-if="fruit.fruit ==="freshmangoes">freshmangoes: {{ fruit.value }}</p>
<p v-if="fruit.fruit ==="Notfreshmangoes">Notfreshmangoes: {{ fruit.value }}</p>
</div>
</div>
</template>
<script>
import {fruitsdata} from "../fruitsdata";
export default {
name: "HelloWorld",
data() {
return {
fruits: fruitsdata,
};
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>