Using props, how to get the array values inside of .js file in Vuejs?

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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

code:- https://codesandbox.io/s/magical-boyd-m3ib6?file=/src/fruitsdata.js

Answer

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>