access to x-data in custom directive

[baravak]

i need get, override and define some variables defined in x-data from custom directive
for example:

Alpine.directive('autocomplate', (el, { value, modifiers, expression }, { Alpine, effect, cleanup, evaluate, evaluateLater }) => {
    // define "__target" variable in this x-data group
})

[SimoTod]

Depending on how you structure the code

evaluate("__target = 'whatever'")

or

let assignment = evaluatelater("__target = __placeholder")
... other code
evaluateAssignment(() => {}, { scope: { __placeholder: 'whatever'} }) // probably inside an effect

[baravak]

i need define variable in directive

<span x-test></span>

Alpine.directive('test', (el, { value, modifiers, expression }, { Alpine, effect, cleanup, evaluate, evaluateLater }) => {
    // define "__target" variable in this x-data group
   let _dom = document.querySelector('#tnx')
   evaluate('new_variable = _dom')
})

[SimoTod]

I'm not totally sure what you are trying to do, though. Your directive seems to be completely unrelated to the element it's been placed on. Why is x-text on that span, how is it going to affect the element? Why are you assigning a random element to an alpine variable? Note, the variable needs to be defined upfront with a sensible default.

In general, you would do

<div x-data="{foo: null}">
    <span x-test></span>
</div>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.directive('test', (el, {}, {evaluate}) => {
        evaluate('foo = _dom', { scope: { _dom: document.querySelector('#tnx')} })
    })
})
</script>

but what you are trying to do sounds a bit unusual, can you post a full example (including x-data)?

[baravak]

thanks