处理复杂数据

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

<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对象的冗余代码。

// 假设接口返回的数据为 responseconst 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'}};