Vuejs com Fluig

Prezados, tentando adicionar o Vue no fluig. ALguém já conseguiu?

Fiz o código abaixo. O resultado é que a mensagem foi executada com sucesso, ou seja, onde tem {{ message }} foi substituído por "Hello Vue!", variável setada no .js

Porém, ao testar a diretiva v-model, não mostra e o resultado foi Message is: {{ message2 }}, ou seja, não foi transformada.

Quem conseguiu pode me dar uma luz? Agradeço de antemão.

view.ftl

<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
    <div id="app">
          {{ message }}
    </div>

    <input v-model="message2" placeholder="edit me">
    <p>Message is: {{ message2 }}</p>

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

Código widget.js

var MyWidget = SuperWidget.extend({
    //variáveis da widget
    variavelNumerica: null,
    variavelCaracter: null,

    app : null,

    //método iniciado quando a widget é carregada
    init: function() {
        this.app = new Vue({
            el: '#app',
            data: {
              message: 'Hello Vue!',
              message2:''
            }
      })
    },

    //BIND de eventos
    bindings: {
        local: {
            'execute': ['click_executeAction']
        },
        global: {}
    },

    executeAction: function(htmlElement, event) {
    }

});
compartilhar
  • @Janilson, não é porque a sua message2 está fora do #app? Pelo que observei, a div#app está encapsulando somente o message.

    Marcos Michalski   17 de Oct de 2018
  • Exatamente isso. A correria e experimentação acaba cegando a gente. Obrigado

    janilson   17 de Oct de 2018
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

2 respostas

Não é a resposta que estava procurando? Procure outras perguntas com as tags wcm widget vuejs ou faça a sua própria pergunta.