Skip to content

Problem with mode #11

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
batusekerci opened this issue Oct 10, 2022 · 8 comments
Closed

Problem with mode #11

batusekerci opened this issue Oct 10, 2022 · 8 comments

Comments

@batusekerci
Copy link

Hi,
I am using this beautiful editor but having a problem with mode. I have Vue 2.6.14.

Here is my usage:

<json-editor-vue
          v-model="json"
          :readOnly="true"
          :navigationBar="false"
          :mainMenuBar="false"
          :mode.sync="data.mode"
></json-editor-vue>

In data I also have: mode: 'text',
I also tried :mode.sync="mode"

But editor is not showing up in text mode.
Thanks

@cloydlau
Copy link
Owner

Could you provide a minimal reproducible codesandbox link? I can not reproduce this.

@cloydlau
Copy link
Owner

I tried this Vue 2.6.14 CDN example and the mode is doing just fine:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatiple" content="IE=Edge,chrome=1">
  <meta name="renderer" content="webkit">
</head>

<body>
  <div id="app">
    <json-editor-vue :mode.sync="mode"></json-editor-vue>
  </div>

  <script>
    window.process = { env: { NODE_ENV: 'production' } }
  </script>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@2.6/dist/vue.esm.browser.min.js",
        "@vue/composition-api": "https://unpkg.com/@vue/composition-api/dist/vue-composition-api.mjs",
        "@vue/composition-api/dist/vue-composition-api.mjs": "https://unpkg.com/@vue/composition-api/dist/vue-composition-api.mjs",
        "vue-demi": "https://unpkg.com/vue-demi/lib/v2/index.mjs",
        "vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
        "json-editor-vue": "https://unpkg.com/json-editor-vue@0.6/dist/json-editor-vue.mjs"
      }
    }
  </script>
  <script type="module">
    import { createApp, ref } from '@vue/composition-api'
    import JsonEditorVue from 'json-editor-vue'

    const app = createApp({
      setup: () => ({
        mode: ref('text'),
      }),
    })
    app.use(JsonEditorVue)
    app.mount('#app')
  </script>
</body>

@cloydlau
Copy link
Owner

cloydlau commented Oct 11, 2022

Closed for now, feel free to reach out to me if you have any question.

@batusekerci
Copy link
Author

batusekerci commented Oct 11, 2022

image
image

These are the console outputs.

Btw, do I have to use TypeScript?

@cloydlau
Copy link
Owner

TS is not required.

You can have a try with the Vue 2.6.14 CDN example I provided previously, it's unlikely related to json-editor-vue.

Temporarily close this due to the lack of enough information.
Please provide a minimal reproduction to reopen the issue.
Thanks.

Why reproduction is required

@cloydlau
Copy link
Owner

After a discussion with the original author, it's not correct in the document saying text mode only take strings. Now you can directly pass JSON value to json-editor-vue@0.7.2.

@batusekerci
Copy link
Author

I could not understand, can I assign "text" to mode after 0.7.2? Anyway, I have found another way, thanks for the effort.

@cloydlau
Copy link
Owner

cloydlau commented Nov 2, 2022

It means you can pass anything in any mode now.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants