JSON解析返回空字符串？答案

【问题标题】：JSON parse returns empty string?JSON解析返回空字符串？
【发布时间】：2020-07-10 13:08:59
【问题描述】：

我不确定这是 VueJS 还是 JS 本身的问题。

我的数据库中有字符串（使用 JSON.stringify() 转换的 JS 对象），如下所示：

{"type":5,"values":{"7":"/data/images/structured-content/64-7-scico.jpg","8":"<b>wefwe</b>","9":"Nějaký text","10":"/data/images/structured-content/64-10-scico.jpg"}}

我想做的是从数据库中选择它（通过 Axios），将其转换回 JS 对象并将其设置为 VueJS 数据：

.then(response => {

            if (response.data.response === "ok" && response.status == 200) {

                // get data
                let data = response.data.data.data[0];

                // pass name to state
                this.objectName = data.name;

                // get json in string format
                let result = data.content;

                // first log
                console.log(result);

                // convert string to json
                let content = JSON.parse( result );

                // second log
                console.log( content.values );

                // update states
                this.IDType = content.type;
                this.values = content.values;


            }

        })

Axios、data.name 和 content.type 工作正常，但是第二个日志（content.values) 似乎返回带有空字符串的观察者，我无法将其传递给 Vue 数据并使用它，正如您在下面的屏幕上看到的那样，无论我做什么，这个对象中的值都是空的。这里到底出了什么问题？谢谢！

来自调试器：

【问题讨论】：

记录一个特定的成员，而不是整个对象。
这行得通，但我需要将整个对象添加到我的 Vue 数据中，这就是问题所在，我试图这样欺骗它：Object.entries(content.values).forEach(([key, val]) => { this.values[key] = val; }); console.log(this.values); 但没有成功
这些值很好，你只是想过早使用它们。将鼠标悬停在控制台消息上的蓝色小 `i 图标上...
@Teemu 这当然是可能的，我只是不明白该怎么做，这怎么可能？我正在尝试处理 axios 在解决后返回的数据，并且数据显然在那里，我为什么要过早地使用它们？那我该怎么办？
如果值存在于预览中（红色文本）但不在下拉列表中，则表明它们在最初制作 console.log 但随后丢失时存在。您可以尝试在console.log( content.values ) 之后立即添加debugger; 吗？

标签： javascript json vue.js

【解决方案1】：

要成为响应式，Vue 需要在分配对象之前知道它们的键是什么。因此，如果它们是已知的，请预先分配它们：

data : () => ({
  values : {
     7 : "",
     8 : "",
     9 : "",
     10 : ""
  }
}),

然后使用对象赋值来设置它们：

Object.assign(this.values, content.values)

如果键是未知/动态值，您可以使用 $set 方法将它们设置为反应式：

Object.keys(content.values).forEach(
  function(key){
     this.$set(this.value, key, content.values[key])
  }
)

【讨论】：

这对我不起作用，无论我如何尝试应用您的解决方案，总是以观察者的形式将我的数据获取到“this.values”，但实际上并不能正常工作