Nano Hash - криптовалюты, майнинг, программирование

Как обновить метаинформацию из динамических данных с помощью vue-meta в Vue js?

У меня есть статьи с соответствующими метаописаниями. Я использую vue-meta для замены метаописаний по умолчанию. Я попытался использовать async и смонтированное свойство для получения информации из моего API, но я не вижу никаких изменений в заголовке, то есть в мета-описаниях соответствующих статей. Я все еще вижу значение по умолчанию, установленное Vue js.

Вот что у меня есть:

<script lang="ts">

import { Vue } from 'vue-property-decorator';
import VueMeta from 'vue-meta';

Vue.use(VueMeta);

export default class ArticleContent extends Vue {
  article: any | null = null;
  articlelist: any = null;
  id = 1;

  async mounted(): Promise<any> {
    this.article = this.articlelist.find((f: any) => {     <-- slug
      return f.title_slug === this.$route.params.id;
    });
    this.articlelist = await this.asyncData();
  }

  async asyncData(): Promise<any> {
    const articlelist = await this.$axios.get(             <-- call to my api
      'https://my_api...'
    );
    return articlelist.data.data;
  }

    metaInfo(): any {                                      <-- meta information
    return {
      title: 'Article',
      meta: [
        {
          hid: this.articlelist[0]._id,
          name: this.articlelist[0].productNames['en'],
          content: this.articlelist[0].metaDescription['en'],
        },
      ],
    };
  }
}
</script>

Буду признателен за помощь, спасибо!

javascript vue.js nuxt.js vuejs2 vue-meta
02.12.2019

  • Вы используете Nuxt? Кроме того, можете ли вы увидеть, загружаются ли данные на вкладке сети вашего браузера? 02.12.2019
  • @DelenaMalan да, я использую Nuxt, и вызов моего API что-то возвращает. 02.12.2019

Ответы:


1

Привет. Скорее тогда, используя asyncData, вы можете использовать serverPrefetch

попробуй это

 serverPrefetch():Promise<any> {
  // this function should return Promise
   return this.$axios.get(
      'https://my_api...'
    ).then(result => {
          this.articlelist = result.data.data
      });

  }
02.12.2019
  • Привет, спасибо за ответ. Не могли бы вы немного расширить свой ответ? Я немного смущен тем, что возвращается в этом методе и как я могу его использовать. 02.12.2019
  • Привет, @AlyssaAlex. Я обновил код, на самом деле serverPrefetch должен вернуть обещание. 02.12.2019
  • Привет, я не получаю никакого ответа от моего API, к сожалению, с помощью этого метода при проверке на моей вкладке сети. Следует ли мне сохранить this.articlelist = this.serverPrefetch(); в смонтированном методе? 02.12.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..