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

[Vue] The idea of ​​making RenderController are reactive #2160

Open
wants to merge 5 commits into
base: 2.x
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add docs and simple example
  • Loading branch information
7-zete-7 committed Sep 28, 2024
commit edf49f45a20d3900348c383c2419a532172b23df
64 changes: 64 additions & 0 deletions src/Vue/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,70 @@ used for all the Vue routes:

.. _using-with-asset-mapper:

Keep properties are reactive
----------------------------

All Vue component properties are reactive up to the Stimulus controller `props` value.

Value changes are two-way:

* Any changes of the Stimulus component `props` value will
reactively pass new values to the Vue component without re-creating it,
as would be the case when passing props between Vue components.

* Any changes to the properties in the Vue component,
if those properties are or replicate the behavior of models,
will change the Stimulus controller `props` value.

.. code-block:: javascript

// assets/vue/controllers/Likes.vue
<template>
<div>Now is {{ likes }} likes.</div>

<button type="button" :disabled="likeTogglePending" @click="toggleLike">
{{ alreadyLike ? 'Not likes anymore!' : 'Like too!' }}
</button>
</template>

<script setup>
defineProps({
likes: String,
alreadyLike: Boolean
});

const likeTogglePending = ref(false);

const toggleLike = async () => {
likeTogglePending.value = true;
try {
await fetch('/like/toggle', {
method: 'POST'
});
} finally {
likeTogglePending.value = false;
}
};
</script>

.. code-block:: html+twig

{# templates/likes.html.twig #}
<div id="likes-component" {{ vue_component('Likes', { 'likes': likes_count, 'alreadyLike': already_like }) }}></div>

.. code-block:: javascript

// update likes component props
document.getElementById('likes-component').dataset.vuePropsValue = JSON.stringify({
likes: newLikesCount,
alreadyLike: isAlreadyLike,
});

.. code-block:: javascript

// get likes component actual props
const { likes, alreadyLike } = JSON.parse(document.getElementById('likes-component').dataset.vuePropsValue);

Comment on lines +223 to +235
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to make examples untied from other components. It is more logical, of course, to use Stimulus controllers to perform actions with parameters.

Using with AssetMapper
----------------------

Expand Down
Loading