vue3.0数据驱动问题

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

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

json 复制代码

<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-button
                v-if="selectedBindingInfo.apiKeyFull"
                link
                type="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-button
              v-if="testResult.apiConfigUsed?.apiKeyFull"
              link
              type="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
    };
  }
};