Как отключить Vue Component, если вызов Ajax не удастся

Question

Я работаю над проектом Vue, в котором есть компонент для загрузки контента в модальный режим с помощью вызова ajax:

<load-content target="foo"></load-content>
<load-content target="bar"></load-content>
<load-content target="oof"></load-content>
<load-content target="rab"></load-content>

Вот пример шаблона:

<template>
  <span class="load-content-wrapper" v-on:click="load">
    Click
  </span>
</template>


<script>
export default {
  name: 'load content',
  props: {
    target: {
      type: String,
      required: true
    }
  },
  methods: {
    load() {
      $('#load-content-modal').modal('show');
      this.$store.dispatch('loadContent', this.target);
    },
  }
};
</script>

Какойвызовет это действие:В зависимости от target он может вернуть 404.

В идеале я хочу автоматически отключить отдельные компоненты загрузки контента, если '/api/fetch-content/' + target недоступен, чтобы пользователи не могли выбирать недоступный контент.

Какой правильный / самый эффективный способ сделать это?

Answer 1

Создайте загрузку переменной хранилища и измените ее в своих действиях следующим образом:

loading: false

const actions = {
  loadContent ({ commit }, target) {
    $.ajax({
      url: '/api/fetch-content/' + target,
    }).then((data) => {
      // Load Modal Window
      commit(setLoading)
    });
  },
};

Затем в мутациях ->

setLoading (state, loading) {
    state.loading = true
  }

Теперь в вашем файле vue используйте эту переменную хранилища ипроверьте, верно ли это, затем загрузите компонент. Вы можете проверить это созданные или смонтированные события компонента.

Answer 2

Опция 1

Упреждающая загрузка содержимого и отключение тех, которые возвращают ошибку.

Вот так будет выглядеть родительский компонент

<template>
  <load-content 
    v-for="(target, index) in loadedTargets"
    :key="index"
    target="target"
  />
</template>

<script>
export default {
  name: 'load content parent',
  data: function() {
    return {
      targets: [
        {link: 'foo', data: null, loaded: false, error: null},
        {link: 'bar', data: null, loaded: false, error: null},
        {link: 'oof', data: null, loaded: false, error: null},
        {link: 'rab', data: null, loaded: false, error: null},
      ]
    }
  },
  computed: {
    loadedTargets() {
      return this.targets.filter(t => t.loaded)
    }
  },
  methods: {
    load(target) {
      const self = this;
      $.ajax({
        url: '/api/fetch-content/' + target.link,
      }).then((data) => {
        self.targets[indexOf(target)].data = data
        self.targets[indexOf(target)].loaded = true
      }).catch((error) => {
        self.targets[indexOf(target)].error = error
      });
    },
  },
  mounted() {
    this.targets.forEach(target => this.load(target))
  }
};
</script>

Опция2

Упреждающая загрузка стоит дорого (и поскольку я не знаю, сколько у вас может быть целей), вы также можете показать успех / ошибку в модале.Правильный UX будет диктовать, что явное действие пользователя должно привести к результату (например, , если пользователь щелкает ссылку, он должен либо увидеть данные в модальном режиме, либо ошибка )

Вот как будет выглядеть ваше действие:

const actions = {
  loadContent ({ commit }, target) {
    $.ajax({
      url: '/api/fetch-content/' + target,
    }).then((data) => {
      // Load Modal Window
    }).catch((error) => {
      // Load Modal Window, and show the error
    });
  },
};

Answer 3

Вы должны сделать ваше поле "target" необязательным и вместо этого добавить пустую строку значения по умолчанию.

И добавить условие "if" в свой метод загрузки.Если "target" пусто, оно не будет продолжено.

export default {
  name: 'load content',
  props: {
    target: {
      type: String,
      default: ''
    }
  },
  methods: {
    load() {
      if (!this.target) return;
      $('#load-content-modal').modal('show');
      this.$store.dispatch('loadContent', this.target);
    },
  }
};