Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Problem with mode #11

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.

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

No branches or pull requests

2 participants