vuejs возврат данных во вложенную переменную - PullRequest
Новая
       0

vuejs возврат данных во вложенную переменную

0 голосов
/ 23 января 2020

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

Logi c

  1. I добавить опцию с типом (например, type = checkbox, name = test)
  2. Затем я добавлю несколько опций для него (например, name = option1, photo = abc.jpg и name = option2, photo = def.png)

Теперь, без части фотографии все хорошо. , но когда я добавил часть фотографии для детей, у нее есть 2 проблемы:

  1. Имя фотографии не может быть возвращено в этом массиве
  2. Фотография для всех параметров будет установить последнее выбранное изображение (снимок экрана ниже)

снимок экрана

one

код

HTML

<el-form-item label="Option Name">
    <el-col :span="10" style="margin-top:15px;">
        <!-- parent -->
        <div v-for="(index, a) in optionParents" :key="a">
        <el-input placeholder="Please input your variation name" v-model="index.name" class="input-with-select">
            <el-select @change="optionType" v-model="index.type" slot="prepend" placeholder="Select">
                <el-option label="Drop-down" value="dropdown"></el-option>
                <el-option label="Checkbox" value="checkbox"></el-option>
                <el-option label="Radio Button" value="radio"></el-option>
            </el-select>
        </el-input>
        </div>

    </el-col>

    <!-- Children -->
    <el-col class="line text-center" :span="3">Option Value(s)</el-col>
    <el-col :span="11" style="margin-top:15px;">

        <div v-if="selecteOption == 'dropdown'">
            <div v-for="(indexx, b) in optionChilds" :key="b">
                <!-- child's -->
                <el-input v-model="indexx.name" placeholder="Please input your option value" class="input-with-select">
                    <el-button slot="append"  @click="addOptionChild(b)"  type="success" icon="el-icon-plus"></el-button>
                    <el-button slot="append" @click="removeOptionChild(b)" v-show="b || ( !b == optionChilds.lenghth > 1)" type="danger" icon="el-icon-delete"></el-button>
                </el-input>
            </div>
        </div>

        <div v-if="selecteOption == 'checkbox'">
            <div v-for="(indexx, b) in optionChilds" :key="b">
                <el-input v-model="indexx.name" :rows="3" placeholder="Please input your option value" class="input-with-select">
                </el-input>
                <!-- upload image -->
                <el-upload
                    class="upload-demo"
                    action="/api/upload/single"
                    :on-change="handleChange"
                    v-model="indexx.photo"  // as you can see my v-model here is same as my input just is set to photo value
                    :limit="1"
                    :multiple="false"
                    :file-list="fileList"
                    :on-exceed="handleExceed"
                    :on-remove="handleRemove"
                    :on-preview="handlePictureCardPreview"
                    :on-success="handleOptionSuccess"
                    :before-remove="beforeRemove"
                    :auto-upload="true">
                    <el-button size="small" type="primary">Click to upload</el-button>
                    <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
                </el-upload>
                <!-- upload image -->
                <el-button-group>
                    <el-button size="small" @click="addOptionChild(b)"  type="success" icon="el-icon-plus"></el-button>
                    <el-button size="small" @click="removeOptionChild(b)" v-show="b || ( !b == optionChilds.lenghth > 1)" type="danger" icon="el-icon-delete"></el-button>
                </el-button-group>
            </div>
        </div>

        <div v-if="selecteOption == 'radio'">
            <div v-for="(indexx, b) in optionChilds" :key="b">
                <!-- child's -->
                <el-input v-model="indexx.name" :rows="3" placeholder="Please input your option value" class="input-with-select">
                </el-input>
                <!-- upload image -->
                <el-upload
                    class="upload-demo"
                    action="/api/upload/single"
                    :on-change="handleChange"
                    v-model="indexx.photo" // as you can see my v-model here is same as my input just is set to photo value
                    :limit="1"
                    :multiple="false"
                    :file-list="fileList"
                    :on-exceed="handleExceed"
                    :on-remove="handleRemove"
                    :on-preview="handlePictureCardPreview"
                    :on-success="handleOptionSuccess"
                    :before-remove="beforeRemove"
                    :auto-upload="true">
                    <el-button size="small" type="primary">Click to upload</el-button>
                    <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
                </el-upload>
                <!-- upload image -->
                <el-button-group>
                    <el-button size="small" @click="addOptionChild(b)"  type="success" icon="el-icon-plus"></el-button>
                    <el-button size="small" @click="removeOptionChild(b)" v-show="b || ( !b == optionChilds.lenghth > 1)" type="danger" icon="el-icon-delete"></el-button>
                </el-button-group>
            </div>
        </div>

    </el-col>
    <el-col :span="24" style="margin-top:15px;">
        <el-button type="primary" @click="addOptions" native-type="submit">Save Options</el-button>
    </el-col>
</el-form-item>

Script

Примечание. Я удалил все остальное, что не было связано с этими параметрами, все, что вы видите в коде ниже, связано с функциональностью параметров. 

export default {
    data() {
        return {
            fileList: [],
            selecteOption: '',
            savedOptions: [],
            optionParents: [
                {
                    name: '',
                    type: ''
                }
            ],
            optionChilds: [
                {
                    name: '',
                    photo: '',
                }
            ],
            form: {
                name: '',
                slug: '',
                price: '',
                new_price: '',
                sku: '',
                qty: 1,
                active: '',
                photo: '',
                shortDesc: '',
                longDesc: '',
                tags: [],
                brand_id: '',
                categories: [],
                user_id: '',
                seoTitle: '',
                seoTags: '',
                seoPhoto: '',
                seoDescription: '',
                variations: [],
                options: [],
                condition: '',
                isbn: '',
                ean: '',
                upc: '',
            },
        }
    },
    methods: {
        addOptionChild(index){
            this.optionChilds.push({name: '', photo: ''});
        },
        removeOptionChild(index){
            this.optionChilds.splice(index, 1);
        },
        optionType: function(value) {
            this.selecteOption = value
        },
        addOptions(e) {
            e.preventDefault();
            axios.post('/api/admin/options/store', {
                childs: this.optionChilds,
                parent: this.optionParents,
            })
            .then(res => {
                this.optionChilds = [
                    {
                        name: '',
                        photo: ''
                    }
                ],
                this.optionParents = [
                    {
                        name: '',
                        type: ''
                    }
                ],
                this.savedOptions.push(res.data.data);
                this.form.options.push(res.data.data.id);
            })
            .catch(error => {
                var errors = error.response.data;
                    let errorsHtml = '<ol>';
                    $.each(errors.errors,function (k,v) {
                            errorsHtml += '<li>'+ v + '</li>';
                    });
                    errorsHtml += '</ol>';

                this.$notify.error({
                    title: 'Error',
                    dangerouslyUseHTMLString: true,
                    message: errorsHtml
                });
            })
        },
        handleOptionSuccess(res, file) {
            this.optionChilds.photo = res.data;  // this s supposed to set uploaded image name in options `photo: ''`
        },
        handleChange(file, fileList) {
            this.fileList = fileList.slice(-3);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleExceed(files, fileList) {
            this.$message.warning(`The limit is 1, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally, remove old image and try again.`);
        },
        beforeRemove(file) {
            return this.$confirm(`Cancel the transfert of ${ file.name } ?`);
        },
    },

}

Отправка данных

Это то, что отправляется на сервер, когда я нажимаю кнопку сохранения

two

Вопрос

  1. Как я могу обновить photo: '' данные с загруженным изображением?
  2. Как исправить изображения для получения одинакового файла для всех параметров?

Ответы [ 2 ]

1 голос
/ 23 января 2020

Я думаю, что не очень хорошо, но решит вашу проблему на данный момент.

В ваши данные поместите новую переменную, такую ​​как 

data() {
  return {
     selected_index: ''
  }

}

, теперь в загруженную кнопку, установите значение, соответствующее текущему индексу, как это 

<el-button size="small" type="primary" @click="selected_index = b">Click to upload</el-button>

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

handleOptionSuccess(res, file) {
    this.optionChilds[this.selected_index].photo = res.data;  // this s supposed to set uploaded image name in options `photo: ''`
},

, вот как вы получаете доступ к нему в соответствии с вашим индексом. Измените handleOptionSuccess на этот 

:on-success="handleOptionSuccess($event, b)"

, теперь в вашей функции handleOptionSuccess вы можете сделать это как 

handleOptionSuccess(res, index) {
    this.optionChilds[index].photo = res.data;  // this s supposed to set uploaded image name in options `photo: ''`
},
0 голосов
/ 23 января 2020

Решено

О моей первой проблеме:

Я исправил проблему с повторяющимися изображениями, удалив :file-list="fileList", после чего каждый параметр получает отдельное изображение

О секунде Проблема: (Благодаря идеям Qonvex620)

Я изменил свой метод on-change на 

:on-change="handleChange(b)"

Затем добавил это к своим данным: 

return {
  index: '',
}

И наконец мои функции: 

handleOptionSuccess(res, file) {
  this.optionChilds[this.index].photo = res.data;
},
handleChange(file, fileList) {
  this.index = file;
},

Теперь каждый мой вариант получает имя сохраненного имиджа.

Надеюсь, это поможет и другим

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...