VueJS - composante Swap sur cliquez sur

Dans mon application j'ai beaucoup de boutons. Lorsque j'appuie sur le bouton, je voudrais charger un modèle (qui remplace le bouton sélectionné):

Modèles:

Vue.component('component-1', {...});
Vue.component('component-2', {...});

Boutons:

<div id="toReplace">
  <button>Button1</button>
  <button>Button2</button>
</div>

Dans ce cas, lorsque j'appuie sur Button1 le contenu de la div toReplace devrait être component-1.
Bien sûr, chaque composant doit avoir un bouton "fermer" qui affiche les boutons (en bref, la div toReplace) sur la presse.

OriginalL'auteur Mistre83 | 2016-09-08

  1. 14

    Vous devez lier une variable à :is de la propriété. Et le changement de cette variable sur le bouton cliquez sur. Aussi, vous aurez besoin de les combiner avec des v-show condition. Comme:

    <div id="toReplace">
    <div :is="currentComponent"></div>
    <div v-show="!currentComponent" v-for="component in componentsArray">
      <button @click="swapComponent(component)">{{component}}</button>
    </div>
</div>
<button @click="swapComponent(null)">Close</button>
    new Vue({
  el: 'body',
  data: {
    currentComponent: null,
    componentsArray: ['foo', 'bar']
  },
  components: {
    'foo': {
      template: '<h1>Foo component</h1>'
    },
    'bar': {
      template: '<h1>Bar component</h1>'
    }
  },
  methods: {
    swapComponent: function(component)
    {
      this.currentComponent = component;
    }
  }
});

    Voici un exemple rapide:

    http://jsbin.com/miwuduliyu/edit?html,js,console,sortie

    Comment pourriez-vous donner des accessoires pour le composant dans cette méthode?
    De transmettre aussi dynamique des accessoires, tu dois utiliser v-bind sans argument, la preuve avec un objet de la prop noms et les valeurs.

    OriginalL'auteur GONG