CrudField Javascript Library stops working properly when VueJs is mounted

[quiquegarcia]

Hello!

Can anyone can help me to understand why CrudField Library won't work properly if I mount a VueJs application? I have this code:

crud.field('currency').onChange(function (field) {
    console.log(field.value);
    crud.field('exchange_rate').show(field.value != "MXN");
}).change();

In the other side I have a simple counter app using VueJs, when I mount that app the onChange() event stops working, but if I remove the VueJs app everything works again.

Another thing I noticed is that if I paste the same code using CrudField library in the javascript console after the VueJs app is mounted, works as expected and the counter also works well.

Anyone has an idea?

[backpack-ai-bot[bot]]

🚨 Bot is not sure about this answer. Please verify. 🚨

Based on the knowledge sources provided, I don't have enough specific information to directly address the interaction between the CrudField JavaScript Library and Vue.js. The documents don't contain any explicit mentions of Vue.js or potential conflicts with it.

However, I can provide some general insights based on the CrudField JavaScript Library functionality:

1. The CrudField library relies on DOM manipulation and event listeners. It's possible that when you mount your Vue.js application, it's interfering with these operations or overwriting some of the event listeners.

2. The fact that the code works when pasted in the console after Vue.js is mounted suggests that the issue might be related to the timing of when the CrudField library code is executed relative to when Vue.js initializes.

3. There have been some changes to how the CrudField library triggers events, as mentioned in this pull request. The events are now triggered on the native input instead of the jQuery wrapped element. This change was made to improve compatibility with native JavaScript event listeners.

To troubleshoot this issue, you could try:

1. Ensuring that your CrudField library code runs after Vue.js has mounted.
2. Checking for any console errors that might provide more information.
3. Verifying that the Vue.js mounting process isn't removing or replacing DOM elements that the CrudField library depends on.

If the problem persists, you might want to create a minimal reproducible example and submit an issue to the Backpack GitHub repository for more specific assistance.

Remember, the CrudField JavaScript Library is designed to work with Backpack, so any modifications to the DOM structure or event handling by Vue.js could potentially interfere with its functionality.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

CrudField JavaScript Library (question about work )
Github Issue (closed): crud.field() js library bugs
Fixes on crud field scripts change callback
Github Issue (closed): CRUD field JS Does Not Play Nicely With Repeatable and Date Range
Github Issue (closed): [Feature or Documentation Request] - CrudField JavaScript Library with relationship/subfield fields
CrudField JavaScript Library|Syntax
CrudField JS API - add triggerChange method
Github Issue (closed): [Bug] Switch field doesn't support CrudField JS Library
Trigger events on the input instead of the jQuery wrapper
JS library - Changed closure args

[quiquegarcia]

As the bot mention, I also think that is related with the timing of the CrudField Library is loaded and executed, but how can I ensure that my code is loaded and executed after the VueJs is mounted?

[karandatwani92]

Hey @quiquegarcia

I was unable to reproduce the issue. Here is what I did:

1. Read How to add VueJS to all Backpack pages
   .
2. Modified scripts config at config/backpack/ui.php to load vue.js:

'scripts' => [
        'https://unpkg.com/vue@3/dist/vue.global.js',
],

3. Added app.js to vite_scripts config at config/backpack/ui.php

'vite_scripts' => [ // resource file_path
        'public/assets/js/app.js',
    ],

4. Executed npm run dev.

App.js:

const { createApp, ref } = Vue

const app = createApp({
    /* root component options */
})

I found no conflict. Can you tell me additional steps to reproduce?