@0348raven

Как реализовать условие при наличии данных в родителе?

Я передаю картинку на сервер в формате base64, его длину и тип. При наличии данных в родителе, я хочу сеттить их в дочерний компонент.

Vue.component('some-form', {
  template: '#some-form',
  data: function() {
    return {
      logoImage: '',
      coverImage: ''
    }
  },
  methods: {
    onSubmit: function(event) {
      var dataForm = {};
      var that = this;
      dataForm['logo-image'] = this.logoImage;
      dataForm['cover-image'] = this.coverImage;

      // AJAX REQUEST HERE with posting data
    },
  },
  mounted: function(){
    var $this = this;

    // AJAX REQUEST HERE with getting data
  }
});

Vue.component('upload-photo', {
  template: '#upload-photo',
  data: function () {
    return {
      image: {
        body: '',
        'content-type': '',
        'content-length': '',
        url: ''
      },
      imageBody: ''
    }
  },
  props: ['logoImage', 'title', 'description'],
  watch: {
    'image': function() {
      this.$emit('input', this.image);
    }
  },
  created: function(){
    this.image = this.logoImage;
  },
  mounted: function () {
    var that = this;
    //AJAX REQUEST HERE to get data
  },
  methods: {
    onFileChange: function(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    },
    createImage: function(file){
      var image = new Image();
      var reader = new FileReader();
      var vm = this;
      vm.image = {};

      reader.onload = function(e) {
        vm.image.body = e.target.result;
        vm.imageBody = e.target.result;
      };

      vm.$set(vm.image, 'content-type', file.type);
      vm.$set(vm.image, 'content-length', file.size);

      reader.readAsDataURL(file);
    },
    removeImage: function (e) {
      this.image = '';
    }
  }
});


Полный пример по ссылке.
  • Вопрос задан
  • 149 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы