当前位置：首页 > news >正文

vue3.0数据驱动问题

news 2025/11/15 7:58:12

页面中含apikey，需要脱敏，手动隐藏和显示。但是切换时隐藏和显示的文本无法切换。

问题原因： 渲染层无法接收到按钮文本变量。
解决方法： 将变量添加到返回值即可。const apiKeyMasked = ref(true); // 绑定配置详情中的API Key是否脱敏 const resultApiKeyMasked = ref(true);

<template><el-dialog v-model="visible" title="Dify API测试" width="90%" :close-on-click-modal="false"><el-form :model="form" label-width="140px" size="default">...<!-- 绑定配置详情展示（只读） --><div v-if="selectedBindingInfo" class="binding-info-section"><el-divider content-position="left">绑定配置详情</el-divider><el-descriptions :column="2" border>...<el-descriptions-item label="API Key"><div style="display: flex; align-items: center; gap: 8px"><span>{{ displayApiKey(selectedBindingInfo.apiKeyName, selectedBindingInfo.apiKeyFull, false) }}</span><el-buttonv-if="selectedBindingInfo.apiKeyFull"linktype="primary"size="small"@click="toggleApiKeyMask">{{ apiKeyMasked ? '显示' : '隐藏' }}</el-button></div></el-descriptions-item><el-descriptions-item label="工作流ID">{{ selectedBindingInfo.workflowId || '-' }}</el-descriptions-item><el-descriptions-item label="完整提示词ID" :span="2">{{ selectedBindingInfo.completePromptId || '-' }}</el-descriptions-item></el-descriptions></div>...</el-form><!-- 测试结果 --><div v-if="testResult" class="test-result"><el-divider>测试结果</el-divider><!-- API配置信息 --><el-descriptions title="使用的API配置" :column="2" border><el-descriptions-item label="API名称">{{ testResult.apiConfigUsed?.apiName }}</el-descriptions-item><el-descriptions-item label="API地址">{{ testResult.apiConfigUsed?.apiUrl }}</el-descriptions-item><el-descriptions-item label="API Key"><div style="display: flex; align-items: center; gap: 8px"><span>{{displayApiKey(testResult.apiConfigUsed?.apiKeyName, testResult.apiConfigUsed?.apiKeyFull, true)}}</span><el-buttonv-if="testResult.apiConfigUsed?.apiKeyFull"linktype="primary"size="small"@click="toggleResultApiKeyMask">{{ resultApiKeyMasked ? '显示' : '隐藏' }}</el-button></div></el-descriptions-item>...</el-descriptions></el-dialog>
</template><script>
import { ref, watch, onMounted, computed } from 'vue';
...
export default {name: 'DifyTestDialog',props: {modelValue: {type: Boolean,default: false}},emits: ['update:modelValue'],setup(props, { emit }) {...// API Key脱敏控制const apiKeyMasked = ref(true); // 绑定配置详情中的API Key是否脱敏const resultApiKeyMasked = ref(true); ...// 初始化onMounted(() => {loadBindingConfigs();});return {...resultApiKeyMasked,resultColumns};}
};