CODEWITHSUNDEEP
javascriptvue.js
T dhanunjay
T dhanunjay

Reputation: 820

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

Upvotes: 0

Views: 533

Answers (4)

Tom&#225;š Šturm
Tom&#225;š Šturm

Reputation: 509

You don't need props, you aren't define any in parent component. In this case you should put fruitsdata import in curly braces, also your fruits variable doesn't exist it is called data, rename data to fruits

<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 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>

https://codesandbox.io/s/magical-boyd-m3ib6?file=/src/components/HelloWorld.vue

https://codesandbox.io/s/aged-brook-wnrhh

<template>
  <div>
    <div>
      <span v-for="apple in apples" :key="apple.id">
        {{ apple.fruit }}: {{ apple.value }}
      </span>
    </div>
    <span v-for="mango in mangoes" :key="mango.id">
      {{ mango.fruit }}: {{ mango.value }}
    </span>
  </div>
</template>

<script>
import { fruitsdata } from "../fruitsdata";
export default {
  name: "HelloWorld",
  data() {
    return {
      fruits: fruitsdata,
    };
  },
  computed: {
    apples() {
      return this.fruits.filter((fruit) => {
        return (
          fruit.fruit === "freshapples" || fruit.fruit === "Notfreshapples"
        );
      });
    },
    mangoes() {
      return this.fruits.filter((fruit) => {
        return (
          fruit.fruit === "freshmangoes" || fruit.fruit === "Notfreshmangoes"
        );
      });
    },
  },
};
</script>

use of computed properties to display them inline https://codesandbox.io/s/aged-brook-wnrhh?file=/src/components/HelloWorld.vue

Upvotes: 0

Gijs Beijer
Gijs Beijer

Reputation: 624

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>

Upvotes: 1

hossein vatankhah
hossein vatankhah

Reputation: 214

just change

import fruitsdata from "../fruitsdata"

to

import { fruitsdata } from "../fruitsdata";

and

data() {
 return {
   data: fruitsdata,
 };
}

to

data() {
 return {
   fruits: fruitsdata,
 };
}

Upvotes: 0

Faisal Nadeem
Faisal Nadeem

Reputation: 119

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>

Upvotes: 0

Related Questions