关于vue对json的解析层数问题。

疑问?

simplestParam: {
        src_sat_ctrl: {
          pt0: { x: 15, y: 0 },
          pt1: { x: 20, y: 1 },
          pt2: { x: 80, y: 1 },
          pt3: { x: 120, y: 0.05 }
        }
      }
在vue模板中访问时会报错
pt0[]:{{ simplestParam.src_sat_ctrl['pt0'] }}`

但是如果是定义
tempA=src_sat_ctrl: {
pt0: { x: 15, y: 0 },
pt1: { x: 20, y: 1 },
pt2: { x: 80, y: 1 },
pt3: { x: 120, y: 0.05 }
页面访问就能正常:

{{ tempA.src_sat_ctrl.pt0 }}

查了一下才知道vue.js最多支持访问到第三层json

如果需要双向绑定的话只能赋值到一个中间值去处理了。

所以以后建议后台不要给那么深的层级关系,会导致绑定变麻烦,出错率变高
---------------------------------------------------------------------------------------=
分隔线
没搞懂 先记一下
在这里插入图片描述
在这里插入图片描述

 <el-row>
                            <el-col v-for="(value, key, index) in simplestParam" :key="index" :span="24">
                              <el-form-item v-if="key.toString()==='src_sat_ctrl'">
                                <el-tooltip
                                  :disabled="tooltipSe"
                                  placement="top-start"
                                  :content="comment[key]"
                                >
                                  <div><span class="spanFront">{{ key }}</span></div>
                                </el-tooltip>
                                <div style="display: block;">
                                  <el-select v-model="paramGroupValue.src_sat_ctrl" placeholder="请选择组数" @change="changeSrcGroup">
                                    <el-option
                                      v-for="item in srcSatGroupOptions"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    />
                                  </el-select>
                                </div>
                                {{ simplestParam.src_sat_ctrl['pt0'] }} 不会报错
                                <table border="1" width="100%" cellpadding="0" cellspacing="0" style="table-layout:auto; ">
                                  <tr>
                                    <td>
                                      <el-input v-model="simplestParam[key]['pt0']['x']" @input="change($event)">
                                        <template slot="prepend">[{{ groupValue }}]&nbsp;&nbsp;&nbsp;pt0_x:</template>
                                      </el-input>
                                    </td>
                                    <td>
                                      <el-input v-model="simplestParam[key]['pt0']['y']" @input="change($event)">
                                        <template slot="prepend">pt0_y:</template>
                                      </el-input>
                                    </td>

                                  </tr>
                                </table>
                                <!-- <el-input ref="myInputNoZero13" v-model="simplestParam[key]" style="width:60%" @change="handleInputNoZero('myInputNoZero13')" @input="change($event)" /> -->
                              </el-form-item>
                            </el-col>
                          </el-row>

                          <el-form-item>
                            <el-tooltip
                              :disabled="tooltipSe"
                              placement="top-start"
                            >
                              <div slot="content">每一个元素的取值为0.0, 1.0或2.0。共3种模式,0.0强度最大,1.0强度中等,2.0强度最弱。
                              </div>
                              <span class="spanFront">src_sat_ctrl</span>
                            </el-tooltip>
                            {{ simplestParam.src_sat_ctrl }}
                            <!-- {{ simplestParam.src_sat_ctrl['pt0'] }} 会报错 -->
                          </el-form-item>

层级都一样 外面包的不一样,但是下面那个就是会报pt0未定义 没搞懂 记录一下再说 希望有大佬能看出代码的问题