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>Estoy tratando de obtener datos del archivo "fruitsdata.js" y vincular los datos en el html. Pero no estoy seguro, lo que está mal. ¿No puede usar el archivo Obtener los datos del archivo .js?
El error que recibo ahora es: -
[Advertencia de Vue]: falta la propiedad requerida: "fruitsdata"
[Advertencia de Vue]: la propiedad o el método "frutas" no están definidos en la instancia, pero se hace referencia a ellos durante el procesamiento. Asegúrese de que esta propiedad sea reactiva, ya sea en la opción de datos o para componentes basados en clases, inicializando la propiedad. Consulte: https://vuejs.org/v2/guide/reactive.html#Declaring-Reactive-Properties .
código:- https://codesandbox.io/s/magical-boyd-m3ib6?file=/src/fruitsdata.js
Entonces, hay un par de cosas mal con tu código.
En primer lugar, no necesita usar accesorios si está cargando los datos de un archivo. Además, los accesorios se utilizan para pasar datos al componente (p. ej., <hello-world :fruits="fruitsdata"> .
El siguiente problema es con su declaración de importación. Debido a que está exportando una const, necesita envolver fruitsdata entre llaves para importar esa variable correctamente.
Edité su código y debería funcionar (no probado).
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>solo cambia
import fruitsdata from "../fruitsdata"a
import { fruitsdata } from "../fruitsdata";y
data() { return { data: fruitsdata, }; }a
data() { return { fruits: fruitsdata, }; }Aquí está importando datos de un archivo javascript pasando los accesorios, elimine los accesorios y use el valor de los datos como se muestra a continuación y también destruya los datos de las frutas, ya que usó la palabra clave predeterminada mientras exportaba los datos de las frutas.
<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>