处理复杂数据

 实现点击事件将双大括号中的数据填充到表单中的部分。可以在模板中给每个显示数据的元素绑定一个点击事件，点击时触发相应的处理函数。

<template>
  <div>
    <div class="data-display" @click="copyData('compressed.is')">{{ datum.process_params.compressed.is.text }}</div>
    <div class="data-display" @click="copyData('compressed.status')">{{ datum.process_params.compressed.status.text }}</div>
    <div class="data-display" @click="copyData('compressed.text')">{{ datum.process_params.compressed.text.text }}</div>
    <div class="data-display" @click="copyData('query.query')">{{ datum.process_params.query.query.text }}</div>
    <div class="data-display" @click="copyData('query.rewrited_query')">{{ datum.process_params.query.rewrited_query.text }}</div>
    <div class="data-display" @click="copyData('textGenerate.is')">{{ datum.process_params.textGenerate.is.text }}</div>
    <div class="data-display" @click="copyData('textGenerate.status')">{{ datum.process_params.textGenerate.status.text }}</div>
    <div class="data-display" @click="copyData('textGenerate.text')">{{ datum.process_params.textGenerate.text.text }}</div>
    <div class="data-display" @click="copyData('textGenerate.type')">{{ datum.process_params.textGenerate.type.text }}</div>
    <div class="data-display">{{ datum.video_url }}</div>
  </div>
</template>

显示数据的 <div> 元素上添加了 @click 事件，并绑定了一个名为 copyData 的方法。其中，copyData 方法接收一个字符串参数，表示要复制的数据路径。

export default {
  // 省略其他代码
  methods: {
    copyData(dataPath) {
      const data = this.getDataByPath(dataPath);
      this.is = data.is.text;
      this.status = data.status.text;
      this.text = data.text.text;
      this.type = data.type.text;
    },
    // 获取指定路径下的数据
    getDataByPath(dataPath) {
      const pathList = dataPath.split('.');
      let data = this.datum.process_params;
      for (let path of pathList) {
        data = data[path];
      }
      return data;
    }
  }
}

在 copyData 方法中，首先通过 getDataByPath 方法获取指定路径下的数据，然后将需要的数据分别赋值给表单的对应属性。

getDataByPath 方法接收一个字符串参数 dataPath，这个参数表示要获取的数据路径。

在这个方法中，首先将路径字符串按 . 分割成一个数组，然后遍历这个数组，逐级访问对象的属性，直到获取到最终的数据。

 

定义了两个方法：copyData和getDataByPath。

copyData方法的作用是根据传入的参数dataPath，找到this.datum.process_params对象中对应的值，并将值赋给组件中的is、status、text、type属性。

getDataByPath方法则是根据传入的路径字符串dataPath，通过逐级访问对象属性的方式获取到对应的值。具体实现逻辑是将路径字符串分割成路径数组pathList，然后遍历路径数组中的每一个元素，每次遍历访问当前数据对象data的对应属性，最终返回最终路径对应的数据。

这样可以让copyData方法调用getDataByPath方法获取到需要的数据，避免了在copyData方法中多次访问this.datum.process_params对象的冗余代码。

// 假设接口返回的数据为 response
    const response = {
      data: {
        datum: {
          process_params: {
            compressed: {
              is: {
                text: '是',
                value: 1
              },
              status: {
                text: '启用',
                value: 1
              },
              text: {
                text: '这是一段文本',
                value: 'some text'
              }
            },
            query: {
              query: {
                text: '这是一个查询',
                value: 'some query'
              },
              rewrited_query: {
                text: '这是一个重写后的查询',
                value: 'some rewrited query'
              }
            },
            textGenerate: {
              is: {
                text: '默认',
                value: 0
              },
              status: {
                text: '禁用',
                value: 0
              },
              text: {
                text: '这是另一段文本',
                value: 'some other text'
              },
              type: {
                text: 'B类型',
                value: 'B'
              }
            }
          }
        },
        video_url: 'https://www.example.com'
      }
    };