vuejs 将数据返回给嵌套变量 [英] vuejs return data to nested variable

查看：39
本文介绍了vuejs 将数据返回给嵌套变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的嵌套表单工作正常，但由于我向其中添加了上传文件，因此无法获取图像名称.

逻辑

  1. 我添加了带有类型的选项(例如 type = checkbox, name = test)
  2. 然后我为它添加多个选项(例如 name = option1, photo =abc.jpg 和 name = option2, photo = def.png)

现在，没有照片部分一切都很好.但是当我向孩子们添加照片部分时，它有两个问题:

  1. 该数组中不能返回照片名称
  2. 所有选项的照片将设置为最新选择的图像(以下截图)

截图

代码

HTML

<el-col :span="10" style="margin-top:15px;"><!-- 父级--><div v-for="(index, a) in optionParents" :key="a"><el-input placeholder="请输入您的变体名称" 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>

</el-col><!-- 孩子们--><el-col class="line text-center" :span="3">选项值</el-col><el-col :span="11" style="margin-top:15px;"><div v-if="selecteOption == '下拉'"><div v-for="(indexx, b) in optionChilds" :key="b"><!-- 孩子的--><el-input v-model="indexx.name" placeholder="请输入您的选项值" 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-图标删除"></el-button></el-input>

<div v-if="selecteOption == 'checkbox'"><div v-for="(indexx, b) in optionChilds" :key="b"><el-input v-model="indexx.name" :rows="3" placeholder="请输入您的选项值" class="input-with-select"></el-input><!-- 上传图片--><el-上传类=上传演示"动作=/api/上传/单":on-change="handleChange"v-model="indexx.photo"//正如你所看到的，我的 v-model 与我的输入相同，只是设置为照片值:limit="1":multiple="假":file-list="文件列表":on-exceed="handleExceed":on-remove="handleRemove":on-preview="handlePictureCardPreview":on-success="handleOptionSuccess":before-remove="beforeRemove":auto-upload="true"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">小于500kb的jpg/png文件</div></el-upload><!-- 上传图片--><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-图标删除"></el-button></el-button-group>

<div v-if="selecteOption == 'radio'"><div v-for="(indexx, b) in optionChilds" :key="b"><!-- 孩子的--><el-input v-model="indexx.name" :rows="3" placeholder="请输入您的选项值" class="input-with-select"></el-input><!-- 上传图片--><el-上传类=上传演示"动作=/api/上传/单":on-change="handleChange"v-model="indexx.photo"//正如你所看到的，我的 v-model 与我的输入相同，只是设置为照片值:limit="1":multiple="假":file-list="文件列表":on-exceed="handleExceed":on-remove="handleRemove":on-preview="handlePictureCardPreview":on-success="handleOptionSuccess":before-remove="beforeRemove":auto-upload="true"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">小于500kb的jpg/png文件</div></el-upload><!-- 上传图片--><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-图标删除"></el-button></el-button-group>

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

脚本

<块引用>

注意:我已经删除了与此无关的所有其他内容选项，您在下面的代码中看到的所有内容都与选项有关功能.

出口默认{数据() {返回 {文件列表:[]，选择选项:'',保存选项:[]，选项父母:[{姓名: ''，类型: ''}],选项孩子:[{姓名: ''，照片: ''，}],形式: {姓名: ''，弹头:'',价钱: ''，新价格: ''，sku: '',数量:1，积极的: ''，照片: ''，简短描述: '',longDesc: '',标签: [],品牌 ID: '',类别:[],用户身份: ''，seoTitle: '',seoTags: '',seoPhoto: '',seoDescription: '',变化: []，选项: []，健康)状况: ''，isbn: '',伊恩: '',upc: '',},}},方法: {addOptionChild(索引){this.optionChilds.push({name: '', photo: ''});},removeOptionChild(索引){this.optionChilds.splice(index, 1);},选项类型:函数(值){this.selecteOption = 值},addOptions(e) {e.preventDefault();axios.post('/api/admin/options/store', {孩子:this.optionChilds，父母:this.optionParents，}).then(res => {this.optionChilds = [{姓名: ''，照片: ''}],this.optionParents = [{姓名: ''，类型: ''}],this.savedOptions.push(res.data.data);this.form.options.push(res.data.data.id);}).catch(错误=> {var 错误 = error.response.data;let errorsHtml = '
    ';$.each(errors.errors,function (k,v) {errorsHtml += '
  1. '+ v + '
    2. ';});errorsHtml += '
';this.$notify.error({标题:'错误'，危险地使用HTMLString:真，消息:errorsHtml});})},handleOptionSuccess(res，文件){this.optionChilds.photo = res.data;//这应该在选项`photo: ''`中设置上传的图像名称},handleChange(文件，文件列表){this.fileList = fileList.slice(-3);},handlePictureCardPreview(文件){this.dialogImageUrl = file.url;this.dialogVisible = true;},处理超过(文件，文件列表){this.$message.warning(`限制为1，你这次选择了${files.length}个文件，加起来总共${files.length + fileList.length}，删除旧图片再试.`);},beforeRemove(文件){return this.$confirm(`取消 ${ file.name } 的转移吗?`);},},}

发送数据

这是当我点击保存按钮时发送到后端的内容

问题

  1. 如何使用上传的图片更新 photo: '' 数据?
  2. 如何修复为所有选项获取相同文件的图像?

解决方案

已解决

关于我的第一个问题:

我已经解决了重复图像问题，通过删除 :file-list="fileList" 之后每个选项都获得单独的图像

关于第二期:(感谢Qonvex620的想法)

我已将我的 on-change 方法更改为

:on-change="handleChange(b)"

然后将此添加到我的数据中:

return {指数: ''，}

最后我的功能是:

handleOptionSuccess(res, file) {this.optionChilds[this.index].photo = res.data;},handleChange(文件，文件列表){this.index = 文件；},

现在我的每个选项都获得了它们存储的图像名称.

希望它也能帮助到其他人

I have nested form which works fine, but since i've added upload file to it, it can't get image name.

Logic

  1. I add option with type (e.g. type = checkbox, name = test)
  2. Then I add multiple options for it (e.g. name = option1, photo = abc.jpg and name = option2, photo = def.png)

Now, without photo part all is good. but when i added photo part to children it has 2 issues:

  1. Photo name can't be return in that array
  2. Photo for all options will be set to latest selected image (screenshot below)

Screenshot

Code

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

Note: I have removed everything else that wasn't related to this options, all you see in code below is related to options functionality.

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 } ?`);
        },
    },

}

Sending data

This is what is sending to back-end when i hit save button

Question

  1. How can I update photo: '' data with uploaded image?
  2. How to fix images of getting same file for all options?

解决方案

Solved

About my first issue :

I've fixed repeating image issue, by removing :file-list="fileList" after that it each option get separate image

About second issue: (Thanks to Qonvex620 ideas)

I have changed my on-change method to

:on-change="handleChange(b)"

Then added this to my data:

return {
  index: '',
}

And finally my functions to:

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

Now each option of mine gets their stored image name.

Hope it help others as well

这篇关于vuejs 将数据返回给嵌套变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆