Wix Velo中下拉选CHART JSON时文本框无法显示JSON的解决方法

架构老林

2026-6-27

解决Wix下拉菜单选择CHART JSON时显示item2而非JSON字符串的问题

问题原因

直接把JSON.stringify(data_chart)生成的长JSON字符串作为下拉选项的value字段，会触发Wix Dropdown组件的隐性限制——过长或复杂的字符串会被组件自动替换为默认的item标识（比如你看到的"item2"），而普通短字符串则能正常识别。

解决方案

不要将完整JSON字符串存在下拉选项的value里，改用简短标识关联对应数据，在选择事件中根据标识获取并展示JSON内容。

修改后的代码实现

保留原JSON数据定义：

var data_chart = {"data":{"labels":["_2024_03_09","_2024_03_10","_2024_03_11","_2024_03_12","_2024_03_13","_2024_03_14","_2024_03_15"],"datasets":[{"label":"10JiFG1L7Y","type":"line","data":[0,0,0,0,0,0,802],"backgroundColor":"rgba(173,118,240,0.2)","borderColor":"rgba(173,118,240,1)","borderWidth":1},{"label":14029,"type":"line","data":[0,22,0,0,16,0,36],"backgroundColor":"rgba(29,22,1,0.2)","borderColor":"rgba(29,22,1,1)","borderWidth":1}],"customization":{"borderWidth":1}}

更新下拉菜单选项，用简短标识作为value：

$w("#dropdown2").options = [
    { label: "SQL", value: "no-code" },
    { label: "CHART JSON", value: "chart-json" }
];

调整下拉选择事件处理逻辑：

export function dropdown2_change(event) {
    const selectedValue = $w("#dropdown2").value;
    if (selectedValue === "chart-json") {
        // 可选：加null和2格式化JSON，提升可读性
        $w("#textBox1").value = JSON.stringify(data_chart, null, 2);
    } else {
        $w("#textBox1").value = selectedValue;
    }
}