浏览代码

确保所有对象属性都是响应式的

bingqishi 3 周之前
父节点
当前提交
fd20b27c5d
共有 1 个文件被更改,包括 22 次插入22 次删除
  1. 22 22
      src/views/iot/scene/manage/component/condition.vue

+ 22 - 22
src/views/iot/scene/manage/component/condition.vue

@@ -24,7 +24,7 @@
                 </template>
                 <div class="popover-content">
                   <ul>
-                    <li v-for="(option, d) in columnList" :key="d" @click="setParameter(vo, option)">
+                    <li v-for="(option, d) in columnList" :key="d" @click.stop="setParameter(vo, option)">
                       {{ option.name }}
                     </li>
                   </ul>
@@ -40,7 +40,7 @@
                 <div class="popover-content">
                   <template v-if="!vo.operatorList?.length">请先选择参数</template>
                   <ul v-else>
-                    <li v-for="option in (vo.operatorList || [])" :key="option.Key" @click="vo.operator = option.Key; vo.operator_text = option.Name; vo.isPopoverVisible1 = false; saveData();">
+                    <li v-for="option in (vo.operatorList || [])" :key="option.Key" @click.stop="vo.operator = option.Key; vo.operator_text = option.Name; vo.isPopoverVisible1 = false; saveData();">
                       {{ option.Name }}</li>
                   </ul>
                 </div>
@@ -98,7 +98,7 @@ interface Column {
 }
 const props = defineProps({
   condition: {
-    type: Array as PropType<IConditionItem[]> | undefined,
+    type: Array as PropType<IConditionItem[][]>,
     default: () => []
   },
   columnList: {
@@ -112,18 +112,16 @@ const props = defineProps({
 })
 
 const setParameter = (vo: IConditionItem, item: any) => {
-   // 先强制设置为 true,再设置为 false,确保状态变化被检测
-  vo.isPopoverVisible = true;
+  // 确保对象响应性
+  if (!vo.hasOwnProperty('isPopoverVisible')) {
+    vo.isPopoverVisible = false;
+  }
+  
   vo.parameter_text = item.name;
   vo.parameter = item.column;
-  // operatorList.value=item.termTypes
   vo.operatorList = item.termTypes;
-  vo.isPopoverVisible = false; // 关闭弹窗
-    // 使用 setTimeout 确保异步更新
-  setTimeout(() => {
-    vo.isPopoverVisible = false;
-  }, 0);
-
+  vo.isPopoverVisible = false;
+  
   saveData();
 }
 
@@ -161,18 +159,20 @@ const delScene = (index: number) => {
 onMounted(() => {
   props.condition.forEach((item) => {
     item.forEach((vo: any) => {
+      // 确保所有必要的响应性属性都存在
+      if (!vo.hasOwnProperty('isPopoverVisible')) {
+        vo.isPopoverVisible = false;
+      }
+      if (!vo.hasOwnProperty('isPopoverVisible1')) {
+        vo.isPopoverVisible1 = false;
+      }
       if (!vo.parameter) {
-        vo.operatorList = []; // 如果没有匹配的列,设置为空数组
+        vo.operatorList = [];
       }
-      // let operator = vo.operator;
-      // let matchedColumn = props.columnList.find((column: any) =>
-      //   column.termTypes.some((term: any) => term.Key === operator)
-      // );
-      // if (matchedColumn) {
-      //   vo.operatorList = matchedColumn.termTypes;
-      // } else {
-      //   vo.operatorList = []; // 如果没有匹配的列,设置为空数组
-      // }
+      // 强制触发响应性
+      vo.parameter_text = vo.parameter_text || '';
+      vo.operator_text = vo.operator_text || '';
+      vo.value = vo.value || '';
     });
   });
 });