VueJS Utilisation accessoire comme des données valeur de l'attribut

Je suis vraiment du mal avec le scénario suivant:

Certains index page:

<!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>

Un unique fichier de composant:

<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>

Et la app.js ressemble à quelque chose comme ceci:

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

Je suis à l'aide de babel avec webpack sous laravel instalation.

Le scénario est comme ceci:

  • Quand je clique sur le Click ME! lien, foo et bar sont mis à jour et transmis à la composante (Cette partie est de travail)
  • La propriété calculée, nommé checkBool pour cet exemple devient vrai, donc je vais ensuite voir le nouvel élément de liste (Cette partie est de travail)
  • Nouvel élément de liste, a un lien avec le texte correctement mis à bar (Cette partie est également de travail)

À ce point, je sais que les valeurs de réglage et de la communication entre le composant et parent fonctionne correctement, cependant data-tab-url="{{ this.foo }}" partie, me rend fou.

À la place de l'analyse de la moustache, de la syntaxe comme prévu et retour data-tab-url="1", je reçois un analysée/échappé à la valeur de tout ce qui est entre guillemets.

Quelque chose comme data-tab-url="%7B%7B+this.foo+%7D%7D".

Maintenant, comment puis-je empêcher l'encodage de passe?
De ce que j'ai lu, il y a une façon vuejs 1.*. À l'aide de trois supports: {{{ this.foo }}} mais il est maintenant dépréciée en faveur de v-html que je ne peux pas l'utiliser pour mon exemple.

Si vous utilisez la Vue, le mode de développement, vous devriez voir des avertissements dans votre navigateur de la console. Vous devriez pas utiliser des accessoires en Vue de l'instance ainsi, dans new Vue({...}). Ici vous déclarez foo et bar dans props et data il y a donc un conflit. Vous devriez utiliser les données dans une Vue d'instance et d'utiliser les données comme une fonction (parce que vous devez déclarer une fonction pour les données en composant vuejs.org/v2/api/#data voir les restrictions. Donc, il ne partout pour ne pas être surprise un jour ) : data: function() { return { foo: '', bar: ''   } }
Supprimer props: [ 'foo', 'bar' ], dans app.js devrait faire le travail.
Je vous remercie pour votre conseil. En fait, je n'ai que le props et n'ont pas le data à tous dans les principaux Vue
Ok et que tout va bien maintenant ? Tout fonctionne comme prévu ? ( Je pense que vous avez un autre problème... donc désolé si c'est pas le cas...)
J'ai un Énorme problème de compréhension concernant VueJS et Jquery, jouez bien ensemble. VueJS est toujours un temps de retard sur Jquery.

OriginalL'auteur Angelin Calu | 2017-04-05

  1. 12

    Lier l'attribut comme ce :data-tab-url="foo".

    Cela donnera l'élément affecté un data-tab-url attribut avec une valeur égale à la foo propriété de votre composant.

    OriginalL'auteur thanksd