Level 8
Sounds like you might want something like v-show. Would be a lot easier than trying to dynamically bring in a new template/component (if that's even possible).
Sep 8, 2016
13
Level 4
Replace component onClick
Hi All! In my application i have many buttons. When i press it i would like to load a template (that replace this button):
Templates:
Vue.component('component-1', {...});
Vue.component('component-2', {...});
Buttons:
<div id="toReplace">
<button>Button1</button>
<button>Button2</button>
</div>
In this case, when i press Button1 the content of the div toReplace should be component-1.
Sure, each component should have a "close" button that show again the buttons (in short, the div toReplace) on press.
Level 24
@mistre83 hope this helps u
https://laracasts.com/discuss/channels/vue/dynamic-components
Level 8
@edoc nice example. That said, I'd probably use something like vue-router when you get to that point. It does lots of nice things for you rather than you writing a bunch of custom code, component transition animations being just one.
Level 24
Vuejs is so simple and easy
Level 4
Thanks to all, this helped me a lot!!! I have used the directive and works pretty well!!
Level 4
@edoc i have successfully used the component but, how i can pass props to it ? Each component have a "common property", that is the id (that come from database).
If i try to add this, i get this warning:
[Vue warn]: Attribute "id" is ignored on component <component> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance
Level 24
sandwitch your html with div and tell me if it works
Level 4
The component is already wrapped on div:
<div v-else>
<component :is="selectedAction" :selected-element="selectedRows[0]"></component>
</div>
In this way i'm able to bind the property.
Level 2
How about binding it:
<component :id="your_value_here"></component>
instead of
<component id="your_value_here"></component>
?
Level 4
The strange thing is that i get this error just on the first button:
<div v-if="selectedAction == undefined">
<div class="btn-actions">
<h5>Title</h5>
<hr>
<button id="btn-1"
class="btn btn-primary btn-sm"
@click="showAction"
>Show Action 1</button>
<button
id="btn-2"
class="btn btn-primary btn-sm"
@click="showAction"
>Show Action 2</button>
</div>
</div>
<div v-else>
<component :is="selectedAction" :selected-element="selectedRows[0]"></component>
</div>
I get this warning just when i press Show Action 1 (but however, it works... i just get the warning).
When i press the second button, i dont get the warning
Level 24
paste all your code
Level 4
The code is no more than this... i have just the action when i click a table row, that "swap" the value from undefined to component name:
showAction(event) {
this.selectedAction = event.target.id;
},
However is just a warning... it works fine....
Level 61
Niccce
Please or to participate in this conversation.