myskypesla

wostex Доделал всё, ошибка которая возникала связана с тем, что приходили данные в формате object.promise, и нужно было обработать данные (slides) с помощью Object.values.

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

<div v-for="slide in slidesToShow">
  <div class="slider__title">{{ slide.title }}</div>
  <div class="slider__text">{{ slide.text }}</div>
  <img :src="slide.photo" alt="">
</div>
<button @click="showMore()">Показать ещё</button>

import Slider from '~components/Slider.vue'
import axios from 'axios'

export default {
  components: {
    Slider
  },
  asyncData () {
    return axios.get('https://vue-test-df6cf.firebaseio.com/slides.json')
    .then((res) => {
      return {
        slides: Object.values(res.data)
      }
    })
  },
  data: function () {
    return {
      nShow: 4, // изначально
      nAdd: 2 // сколько добавляем
    }
  },
  computed: {
    slidesToShow: function () {
      return this.slides.slice(0, this.nShow)
    }
  },
  methods: {
    showMore: function () {
      this.nShow += this.nAdd
    }
  }
}

в моём примере нужно было поменять только async data... на async asyncData...

Правильный таск для gulp:

gulp.task('js', function() {
  return browserify({ entries: 'src/js/main.js'})
    .transform(babelify, { presets: ['es2015'] })
    .transform(vueify)
    .bundle()
      .pipe(source('app.js'))
      .pipe(gulp.dest('public/js'))
      .pipe(connect.reload());
});