отображение данных axios в сжатом виде

#javascript #svelte #sapper

#javascript #стройный #сапер

Вопрос:

У меня есть два вопроса:

Во-первых, после получения данных из API с помощью axios, как мне отобразить их в моем интерфейсе и как мне играть с ними, чтобы выглядеть так, как я хочу? Например, я вызываю массив данных и хочу, чтобы он помещался в выпадающее меню.

И второй вопрос, связанный с первым, допустим, у меня есть файл маршрута (для проекта sapper), в котором есть компонент <Dashboard /> . Внутри этого компонента панели мониторинга у меня есть два компонента, которые называются <BestOf /> and <History /> . Мне нужно вызвать api в файле маршрута, но отобразить данные в компоненте, которого нет в файле маршрута. Как я могу это сделать?

Если я попытаюсь выполнить <Dashboard {...variableWithAxiosData} /> в файле маршрута, как мне получить данные для доступа к нужному компоненту внутри панели мониторинга между <BestOf /> и <History /> ?

Я не уверен, что это понятно, но если вы поняли, пожалуйста, не стесняйтесь давать какие-либо советы, и если это неясно, дайте мне знать, что я могу уточнить.

Приветствия

Ответ №1:

Если вы знаете, какие данные вы получаете variableWithAxiosData и что использовать в BestOf и History , вы можете сделать следующее:

 // Dashboard.svelte
<script>
  export let best;
  export let history;
  export let otherProps;
</script>

<BestOf {best} />
<History {history} />
  

С другой стороны, вы могли бы передать все из реквизитов или некоторые из реквизитов в <BestOf /> и <History />

 // Dashboard.svelte
// if variableWithAxiosData = { foo: 1, bar: 2 }
<script>
  export let foo;
</script>

<BestOf {...$$props} />
<!-- equivalent to -->
<BestOf foo={1} bar={2} />

<History {...$$restProps} />
<!-- equivalent to -->
<BestOf bar={2} />
  

Комментарии:

1. Спасибо @Tan Li Hau! Но я не понял, как я передаю данные из моего файла маршрута, скажем, [state].svelte в dashboard.svelte.

2. @JamesChen использует dispatch для передачи данных./ import {createEventDispatcher} из «svelte»; const dispatch = createEventDispatcher(); dispatch(«данные», axiosdata);

3. Спасибо, дагалти, я попробую это!