arioch77
@arioch77
веб-разработчик

При export/import объекта в Vue(Nuxt) содержимое объекта дополняется служебными данными — как сделать правильно?

Решил вынести JSON-контент в отдельный файл:

<script>
//data/Content.vue
export default {
  1: { id: 1, title: "title-1", short: "short-1", body: "body-1", icon: "", slug: "" },
  2: { id: 2, title: "title-2", short: "short-2", body: "body-2", icon: "", slug: "" }
} 
</script>


импортирую в страницу:
//pages/index.vue
...
import Content from "@/data/Content";
...
data() {
    return {
      content: Content
    };
  }
...


и далее, вывожу:

<template>
  <div>
    {{content}}


отображает в браузере так:

{ "1": { "id": 1, "title": "title-1", "short": "short-1", "body": "body-1", "icon": "", "slug": "" }, "2": { "id": 2, "title": "title-2", "short": "short-2", "body": "body-2", "icon": "", "slug": "" }, "beforeCreate": [ null ], "beforeDestroy": [ null ], "__file": "data/Content.vue" }


т.е. добавляет в конец объекта еще три свойства со служебной информацией.

Оно может конечно и неплохо, сразу знать в каких хуках оно доступно и чего и как, но при переборе через v-for эти штуковины тоже выводятся, а мне это, понятное дело, не нужно.

Пока сделал так:

export default [{ id: 1, title: "title-1", short: "short-1", body: "body-1", icon: "", slug: "" }, { id: 2, title: "title-2", short: "short-2", body: "body-2", icon: "", slug: "" }]


так - норм.

Но хочется разобраться.

Как вообще реализовать такой импорт наиболее правильно?

Vuex и axios - не предлагать :) Я хочу сделать именно через обычные файлы.

И еще, можно ли вообще уйти от конструкции <script>...</script> в файле с контентом? Я пробовал - без нее не работает. Но может как-то можно?

Спасибо.
  • Вопрос задан
  • 86 просмотров
Решения вопроса 2
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
Смешно, но почему бы просто не подключить .json файл?

Решил вынести JSON-контент в отдельный файл:


в отдельный vue файл?
Ответ написан
arioch77
@arioch77 Автор вопроса
веб-разработчик
Решение от Михаил :

file.json

{
  1: {
    "id": 1,
    "title": "title-1",
    "short": "short-1",
    "body": "body-1",
    "icon": "",
    "slug": ""
  },
  2: {
    "id": 2,
    "title": "title-2",
    "short": "short-2",
    "body": "body-2",
    "icon": "",
    "slug": ""
  }
}


компонент

import content from './file.json';

data() {
  return {
    content,
  };
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@nvdfxx
Senior Pomidor developer
<script>
//data/Content.vue
export default {
  1: { id: 1, title: "title-1", short: "short-1", body: "body-1", icon: "", slug: "" },
  2: { id: 2, title: "title-2", short: "short-2", body: "body-2", icon: "", slug: "" }
} 
</script>


Ад какой-то, часто вы импортируемые компоненты в тег script оборачиваете?
сохраните как .json и импортируйте json а не vue модуль
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы