Vuejs com Fluig

TOTVS Fluig Páginas (WCM)
, , ,
1

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) {
    }

});
2

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

3

Exatamente isso. A correria e experimentação acaba cegando a gente. Obrigado

4

A solução foi exatamente o que Marcos Michalski apontou

message2 está fora do #app

5

Olá pessoal.

Estou tentando fazer também a inclusão do Vue e não consigo. Acho que estou fazendo em um local errado.

Tenho um Formulário e estou tentando incluir o script na página e ter uma div com o ID porém, não obtenho sucesso. O Vue é carregado, porém, não faz a "mágica."

Sege:


<div id="form44">
    <ol>
        <li v-for="todo in todos">{{ todo.name }}</li>
    </ol>


    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#form44',
            data: {
                todos: [
                    { id: 1, name: 'teste' }
                ]
            }
        })
    </script>
</div>

Alguma ideia?

6

@Deyvison, no seu HTML você referencia todo.name, porém seu objeto é todos e deveria ficar todos.name.
Tente assim, acho que irá funcionar.

7

Eu uso o todo.name porque faço um for. Porém, não vai. Tentei o message como no exemplo do amigo, porém, não vai.

8

Consegui aqui. Acho que era uma questão de cache.