Question 253506 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get exported value of svelte component?

The library flowbite-svelte has component Popover with open property. The property changing by click on button. In order to control external event listener (no in example) I need to know current value of open property. How to get it?

I tried to use open= and bind:open=, but buth undefined when button clicked.

Online REPL

<script>
import { onMount } from 'svelte'
import { Popover } from 'flowbite-svelte'

let popover
let isOpen

onMount(() => {
  popover.$on('show', () => {
    console.log(popover.open) // undefined
    console.log(isOpen) // undefined
  })
})
</script>

<button>Click</button>

<Popover
  <!-- open={isOpen} or bind:open={isOpen} -->
  bind:this={popover}
  trigger="click">
    Some content
</Popover>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found solution via debugging. When show event occurs, callback has this with popover instance. Inside this.$$.ctx stored values by index from this.$$.props.

    <script>
import { onMount } from 'svelte'
import { Popover } from 'flowbite-svelte'

let popover

onMount(() => {
  popover.$on('show', onPopoverOpenChanged)
})

function onPopoverOpenChanged() {
  let indexPropOpen = this.$$.props.open
  let isOpen = this.$$.ctx[indexPropOpen]
  if (isOpen) {
    
  } else {
    
  }
}
</script>

<button>Click</button>

<Popover
  bind:this={popover}
  trigger="click">
    Some content
</Popover>

  2. 0

    There is no property for that, and there also is only a show event, no event for closing.

    That being the case, there currently is no proper way of getting the state. You could maybe query the DOM, but this functionality should be part of the component.

    Maybe open an issue if there is none already.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search