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

Question

[Ариох]

Решил вынести 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> в файле с контентом? Я пробовал - без нее не работает. Но может как-то можно?

Спасибо.

Answer 1

[Михаил]

Смешно, но почему бы просто не подключить .json файл?

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

в отдельный vue файл?

Comments

[Ариох]

просто ... подключить .json файл

А как именно подключить?

[Михаил]

Ариох, а как вы .vue подключаете?

[Ариох]

Михаил, вы можете просто написать как "просто ... подключить .json файл" - что конкретно вы имели в виду под этой фразой?

Подключить какой-то командой или директивой или что?

Я не являюсь большим знатоком Vue - потому и спрашиваю.

[Михаил]

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,
  };
}

+ ещё возмножно нужно поставить json-loader в webpack (гуглится)

[Ариох]

Михаил, спасибо, я попробую

[Ариох]

Михаил, работает)) спасибо!

Answer 2

[Ариох]

Решение от Михаил :

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,
  };
}

Answer 3

[nvdfxx]

<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 модуль

Comments

[Ариох]

Зачем мне ваши эмоции?

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

Лучше бы просто подсказали решение и всё.

Впрочем, выше мы с Михаилом уже вроде прояснили вопрос.