Vue.js 组件渲染

从Twig 内部渲染 Vue.js

构建了一个 Vue.js 组件？在 Twig 中快速轻松地渲染它并传入动态属性。

composer require symfony/ux-vue

阅读文档

assets/vue/controllers/PackageSearch.js

/**
 |  Single-File Components - e.g. PackageSearch.vue -
 |  are supported when using Webpack Encore.
 */
import { ref, computed } from 'vue';
import PackageList from "../components/PackageList.js";

export default {
    components: {
        PackageList
    },
    props: ['packages'],
    setup(props) {
        const search = ref('');

        const filteredPackages = computed(() => {
            return props.packages.filter(
                uxPackage => uxPackage.humanName.toLowerCase().includes(search.value.toLowerCase())
            );
        });

        return {
            search,
            filteredPackages
        }
    },
    template: `
        <div>
            <input
                v-model="search"
                class="form-control"
                type="search"
                placeholder="This search is built in Vue.js!"
            />

            <div class="mt-3">
                <PackageList :packages="filteredPackages" />
            </div>
        </div>
    `
};

templates/ux_packages/vue.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    <div {{ vue_component('PackageSearch', {packages: packagesData}) }}>
        Loading...
    </div>
{% endblock %}

UX Vue.js

加载中...

安装它

$ composer require symfony/ux-vue