search

swey / fractal-vue-adapter

Vue template adapter for Fractal.
11 stars 5 forks source link

Computed properties #8

Open acespace90 opened 5 years ago

acespace90 commented 5 years ago

Hi, consider this code (inspired by Vue doc: https://vuejs.org/v2/guide/computed.html#Basic-Example)

HTML

<div id="app">
  <p>{{ title }}</p> <!-- Handlebars expression -->
  <p>\{{ reversedMessage }}</p> <!-- Vue expression -->
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
  },
  computed: {
    reversedMessage: function () {
      return this.title.split('').reverse().join('')
    }
  }
});

What if I want to manipulate some hbs expression with Vue computed properties? In order to make it works, I have to insert title into data: {} instead of into JSON file as Fractal does.

I hope I was clear

Any suggestions?

ITernovtsii commented 3 years ago

@acespace90 It's for Vue 3, but you may be interested in using this tool https://www.npmjs.com/package/@contextualcode/fratomic-alivue