Alpinejs x-for not working in vuejs

I'm using alpine.js and vue.js together in laravel app when i try to use x-for it will not working properly rest of tings are working fine i'm try to sample loop it'll through the exception in console i'm also use v-pre but not working


<div x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <template v-pre x-for="color in colors">
        <span x-text="color">
    </template>
</div>

Uncaught ReferenceError: color is not defined through this exception Please help

Niush

3 years ago

Level 50

Things get unnecessarily complicated when you try to combine Vue & Alpine. Mostly because they use similar short-hands and utilizes template tags.

https://github.com/alpinejs/alpine/issues/363

In this case v-for's template tag most likely got processed by Vue Virtual DOM, and Alpine's internal could not access _x_dataStack. Same issue should also occur if you try something like:

<template x-if="colors.length > 2" x-text="colors"></template>

I would suggest to use only one framework and not make things complicated.

2 likes

tykus

3 years ago

Level 104

I'm using alpine.js and vue.js together...

Why? Why? Why?

1 like

Please or to participate in this conversation.