Rendering of object data in vue table

<el-table
              :data="form.projectSetData"
              style="width: 100%">
              <el-table-column
                prop="columncontent"
                label=""
                width="180">
                <template scope="scope">
                    <el-form-item label="">
                       <el-col :span="11">
                          <el-input v-model="scope.row.columncontent.rotation"></el-input>
                       </el-col>
                   </el-form-item> 
                   <el-form-item label="">
                    <el-col :span="11">
                    <el-input v-model="scope.row.columncontent.financingamount"></el-input>
                    </el-col>
                   </el-form-item> 
                   <!-- <el-tag>{{scope.row.columncontent.rotation}}</el-tag> -->
                </template>
              </el-table-column>

            </el-table>


     projectSetData :
     projectSetData:[
                  {
                    columnname:"",
                    columncontent:{
                      rotation:"123",
                      financingamount:""
                    }
                  },
                  {
                    columnname:""     
                  },
                  {
                  columnname:""     
                  },
                  {
                  columnname:""     
                  }
                ]

I want to assign the properties of the objects in the table table array to the input, in the table, but I miswrote it.

how should I write this?

Error in render: "TypeError: Cannot read property "rotation" of undefined"

Jan.08,2022

add a scope.row.hasOwnProperty if = "scope.row.hasOwnProperty ('columncontent')"


corresponding attribute at the appropriate location to achieve two-way binding.
after getting the projectSetData set of data, preprocess the data to supplement the missing attributes and make sure that the attributes you want to bind exist.

Menu