初始expand的深度

[liushuaikobe]

请问有没有办法可以指定编辑器在 readonly 模式下的初始化展示 JSON 的 深度？

[cloydlau]

JSON 的深度跟模式有关系吗？我试了一下现在不是默认全展开的吗，你想要什么效果？比如10层的深度，你想要指定展开第5层这种？试试 expand, scrollTo 能否满足你的需求。

[cloydlau]

先暂时关闭了，如有疑问随时打开。

[liushuaikobe]

@cloydlau 我设置了 组件的 ref 如下（组件是在 v-for 内，理论上应该会有很多实例）

<div class="json-block">
  <JsonEditorVue v-model="data" :readOnly="true" :onChangeMode="onChangeMode" ref="hello"/>
</div>

然后在 mounted 中通过 ref 引用获取不到组件实例，理论上应该是一个 实例数组，实际上是个 Proxy 对象，如下。对其直接调用 expand 方法报错。

mounted() {
  console.log(11, this.$refs.hello);
  // 报错
  this.$refs.hello.expand(path => true)
}

vue 版本 3.2.3。

麻烦谅解，我不是专业的前端，如造成困扰，很抱歉。

[cloydlau]

首先在循环里面 ref 命名怎么能写死呢，那不就重复了吗，ref 得写成动态的，比如 :ref="'jsonEditorVue' + i"，这个算 Vue 基础了。

想要调用 svelte-jsoneditor 的方法，第一步要获取 svelte-jsoneditor 的实例对象。这个在文档里是写了的：

最后代码是这样的：

• jsonEditorVue0.value.jsonEditor.expand()
• jsonEditorVue0.value.jsonEditor.scrollTo()

有点长但是逻辑非常清晰：

• jsonEditorVue0.value 这个是你定义的 ref，为什么加 .value 我就不解释了吧，这个也属于 Vue 基础范畴
• jsonEditorVue0.value.jsonEditor 这个是 svelte-jsoneditor 的实例对象

[cloydlau]

你这也没说 Vue 版本，如果你用的是选项式 API，这么拿：this.$refs.jsonEditorVue0.jsonEditor.expand
（需要升级到 v0.6.6 ）