Vue 如何把loop中的元素传递给Form 表单

benniu
  • 35

Vue 如何把loop中的元素传递给Form 表单

相关代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <template>
            <el-tabs v-model="activeName">
                <el-tab-pane v-for="item in list" :label="item" :name="item">{{ item }}

                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="Hello">
                            <!-- <el-input v-model="item" placeholder=""></el-input> -->
                            <el-input v-model="formInline.user" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">SayHello</el-button>
                        </el-form-item>
                    </el-form>

                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                list: ["Alibaba", "Tencent", "Baidu"],
                formInline: {
                    user: '',
                }

            }
        },
        methods: {
            onSubmit() {
                //console.log(this.formInline.user);\

                alert(this.formInline.user);
            }
        }
    })
</script>

</html>

要如何处理这个参数的传递呢?我想把这个item 传递给表单中的user

回复
阅读 1.6k
2 个回答
✓ 已被采纳

不太明白的是,为什么你的每个 tab 循环里的表单都是同一个。

如果是想实现将当前激活的 tab 的值赋给 formInline.user 可以使用 tab-click 事件去动态赋值,输入框因为已经绑定了 formInline.user,所以不可能再去绑定 list 里的元素。

<el-tab @tab-click="handleTabClick"></el-tab>

handleTabClick (e) {
  this.formInline.user = e.name
}

如果是要实现每个循环里是不同表单的 user,在 create 钩子里去匹配赋值就好了。

<el-tab-pane v-for="(item, index) in list" :key="index" :label="item" :name="item">{{ item }}
  <el-form :inline="true" :model="formInline[index]" class="demo-form-inline">
    <el-form-item label="Hello">
      <el-input v-model="formInline[index].user" placeholder=""></el-input>
    </el-form-item>
    ...
  </el-form>
</el-tab-pane>

data () {
  return {
    formInline: [
      {user: ''},
      {user: ''},
      {user: ''}
    ]
  }
}
created () {
  this.formInline = this.formInline.map((item. index) => {
    item.user = this.list[index]
  )
}

应该还一个思路,不是传值,页签有当前选中想,提交的应该是当前选中项,
看了一下elment 的文档,this.activeName 就是当前激活的选项卡,
文档:http://element-ui.cn/#/zh-CN/...
所以:


<script>
    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                // http://element-ui.cn/#/zh-CN/component/tabs  参考文档
                /// 这个值
                activeName:'Alibaba'
                visible: false,
                list: ["Alibaba", "Tencent", "Baidu"],
                formInline: {
                    user: '',
                }

            }
        },
        methods: {
            onSubmit() {
                // 就是这个
                let item  = this.activeName;
                //console.log(this.formInline.user);\
                  
                alert(this.formInline.user);
            }
        }
    })
</script>
你知道吗?

宣传栏