账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue 动态生成list v-for循环问题
    29
    0 
    columnSetupArr:[]，

newCustomTable:{
  columnName:"",
  columnDetail:"",
  isColumnTableVal:1  
}

/*add*/
this.form.columnSetupArr.push(this.newCustomTable);

<table class="projectTable">
              <tr v-for="(item,index) in form.columnSetupArr" v-if="index>=4">
                  <td>
                        <el-col :span="20">
                          <el-input style="width:120px" v-model="item.columnName"></el-input>
                        </el-col>
                    </td>  
                    <td>
                        <!-- <el-col :span="20">
                          <el-input style="width:120px" v-model="item.columnDetail"></el-input>
                        </el-col> -->
                            
                            <el-form-item label="">
                            <el-col :span="10">
                              <el-input v-model="item.columnDetail"></el-input>
                            </el-col>
                            </el-form-item>
                    </td>
                    <td>
                        <el-select v-model="item.isColumnTableVal" placeholder="请选择">
                            <el-option
                                v-for="item in isnewCustomTableItemsOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select> 
                    </td>
                    <td>
                         删除
                    </td>
                </tr>      
            </table>

    点击按钮向数组里面push一个对象，动态生成一个table表格的一行数据，然后v-for渲染数据，
    因为每行里面有input 需要绑定v-model，即v-model="item.columnName"，现在的问题是生成了几个tr后，所有的item.columnName 都是联动的，就是我修改第一行的input 然后后面的几行里面同一个v-model的input值也会改变，这个应该怎么处理呀

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 油炸老可爱 普通会员 1楼

      在Vue中，当您需要动态生成列表时，通常会使用v-for循环。v-for循环可以根据指定的值（变量）来遍历列表。然而，如果您遇到问题，可能是因为在循环中没有正确地使用变量。让我们来看看如何解决这个问题。

      假设我们有一个列表，例如：

      ```html

      • {{ item.name }}

      ```

      在这个例子中，items是一个包含多个对象的数组。每个对象都有一个name属性。我们需要在循环中动态地生成item.name。

      如果你尝试在循环中直接写item.name，那么将会出现语法错误。因为v-for循环并不接受直接的变量作为参数。但是，你可以通过使用v-for="item in items" :key="item.id"来创建一个虚拟的索引。

      例如，如果你有一个包含多个对象的数组，你可以像这样：

      ```html

      • {{ item.name }}

      ```

      然后在JavaScript中，你可以这样使用它：

      ```javascript var items = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ];

      var list = '

        '; for (var i = 0; i < items.length; i++) { list += '
      • {{ item.name }}
        • '; } list += '
      ';

      document.getElementById('list').innerHTML = list; ```

      在这个例子中，item.name将被替换为item.id，这样就可以正确地遍历列表。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部