vue.js и twig

[PeletonTver]

Пробую связать Twig и Vue.js

Спойлер

код

<div id="content">

<h1 ref="price">{{ price }}</h1>
<h2>[[ final_price ]].p</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.options.delimiters = ['[[', ']]']
    var app = new Vue({
        el: '#content',
        mounted(){
            this.price=Number(this.$refs.price.innerHTML.slice(0,-2));//убираю .р
        },
        data: { price:0,
        },
        computed:{
            final_price(){
                return this.price + 10;
            }
        }
    });

</script>

 

Правильно ли я передаю данные в Vue через ref в mounted() или есть более правильные решения?

 

Змінено 5 липня 2020 користувачем PeletonTver

[PeletonTver]

Вообщем разобрался вроде, надо переменные TWIG передавать в vue через json_encode.

Спойлер

<div id="test" >
    {{ heading_title }}
     [[price_vue]]
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    Vue.options.delimiters = ['[[', ']]'];

var app = new Vue({
    el: '#test',
    data:{
        price_vue:{{ price | json_encode }},
    }
});
</script>

 

 

Змінено 7 липня 2020 користувачем PeletonTver