VueJS Use prop como valor do atributo de dados

Question

Apr 05, 2017, 06:32 PM

vuejs2 ecmascript-6 javascript vue.js webpack

VueJS Use prop como valor do atributo de dados

Estou realmente lutando com o seguinte cenário:

Alguma página de índice:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div id="app">

      <ul>
        <li>some existing option</li>
        <example-component :foo="foo" :bar="bar"/>
      </ul>

      <a @click.prevent="showDetail(1, 'abc')" href="#" >Click ME!</a>

    </div>


    <script src="app.js"></script>


  </body>
</html>

Algum componente de arquivo único:

<template>
    <li><a v-show="checkBool" data-toggle="tab" class="some-class" href="#container-div" data-tab-url="{{ this.foo }}">{{ this.bar }}</a></li>
</template>



<script>
export default {

  props: ['foo', 'bar'],


  computed: {
    checkBool: function() {
      return (this.foo != undefined && this.bar != undefined )
    }

  }

}
</script>

E aapp.js se parece com isso:

import Vue from 'vue'

Vue.component('example-component', require('ExampleComponent.vue'));

const app = new Vue({
    el: '#app',

    props: [
      'foo',
      'bar'
    ],

    data: {
      foo: '',
      bar: ''
    },

     methods: {
      showDetail: function (foo, bar) {
        this.foo = foo,
        this.bar = bar
      }
  }
});

Estou usando o babel com o webpack em uma instalação do laravel.

O cenário é assim:

Quando clico noClick ME! ligação,foo ebar são atualizados e passados para o componente (esta parte está funcionando)A propriedade computada, denominadacheckBool para esse exemplo se tornar verdadeiro, então irei ver o novo item da lista (esta parte está funcionando)Novo item da lista, possui um link, com o texto definido corretamente comobar (Esta parte também está funcionando)

Neste ponto, eu sei que os valores definidos e a comunicação entre o componente e o pai estão funcionando corretamente, no entantodata-tab-url="{{ this.foo }}" parte está me deixando louco.

Em vez de analisar a sintaxe do bigode conforme o esperado e retornardata-tab-url="1", Recebo um valor analisado / escapado de tudo entre aspas.

Algo comodata-tab-url="%7B%7B+this.foo+%7D%7D".

Agora, como evito que a codificação ocorra? Pelo que li, costumava haver uma maneira devuejs 1.*. Usando três colchetes:{{{ this.foo }}} mas agora está obsoleto em favor dev-html que não posso usar no meu exemplo.