I need to integrate facebook plugin into my vuejs application. I wanted to use
vue-facebook-login-component plugin but I am confused at some points. I can not change text, it doesnt have a text prop, instead it has a text slot. And their slot example doesnt have a api-id which needed for facebook login.
They have to slot example but I could not understand how to use it, never used slot before. I searched google but still can not make it.
When I used in my code, slot-scope="scope" gives scope is defined but never used error, so my first question is how will I use it ?
Another issues is, in slot example it doesnt have app-id, I confused where to put id when I use slot, and how to get login-logout information.
this one works but I can not change login/logoutworking texts.
<v-facebook-login app-id="966242223397117"></v-facebook-login>
this is the example with slot given on the plugin page
<template>
<v-facebook-login-scope>
<button slot-scope="scope">
<!-- Compose HTML/CSS here, otherwise nothing will be rendered! -->
</button>
</v-facebook-login-scope>
</template>
and this is my original button code where I want to integare facebook login. How will I use his code in above code-with-slot ? and where will I put app-id ? Here it is a more detailed code with slot from the plugin and it doesnt have api-id either.
https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.vue
<v-button
class="gray fw shadow-none login-box__submit"
title="FACEBOOK İLE GİRİŞ YAP"
/>
so what I tried is directly putting my button inside of it (just giving class doesnt work)
This brings button with my button class but stays connecting and never bring login
<template>
<v-facebook-login-scope>
<button slot-scope="scope">
<!-- Compose HTML/CSS here, otherwise nothing will be rendered! -->
<v-button
class="gray fw shadow-none login-box__submit"
title="FACEBOOK İLE GİRİŞ YAP"
/>
</button>
</v-facebook-login-scope>
</template>
Try this
<v-facebook-login app-id="966242223397117">
<span slot="login">FACEBOOK İLE GİRİŞ YAP</span>
</v-facebook-login>
Related
I'm trying to build some simple stuff with Astro.js for HTML templates and Alpine.js for interactivity when needed. I stumbled upon problem of trying to use Alpine x-on events on Astro component
Here is sample usage of the Button component:
<div x-data>
<Button #click="console.log('Clicked astro')">Click me</Button>
<button #click="console.log('Clicked normal button')">Click me</button>
</div>
The first one doesn't work while the native button works as normal.
Button component is just a button element with some tailwind classes, nothing fancy:
<button class="border-[1px] rounded-lg transition px-6 py-2 hover:text-inherit hover:border-transparent">
<slot />
</button>
How can I get it to work? I really love astro with alpine so far but this little thing is stopping me from using it for my project.
I tried various of different things but none of them worked really. I went through docs and couldn't find anything related to my issue - it feels like there must a simple solution but I'm missing something.
I have reached out to Astro support on discord and it was answered by user happydev there:
Anything passed to an astro component like this is taken as a prop, so you need to pass it to the element you want to bind the event on
Something like this
//Button.astro
---
const {"#click": click} = Astro.props
---
<button #click={click}>
<slot/>
</button>
Vue2 is not updating one specific component (<Button>) inside v-if and v-else, while the rest of the content is updated.
I have just found out a way to make this code work, but I do not catch the behaviour of Vue2 re-rendering, and I am afraid that I will not be able to make it work this way anytime, because here I only have 2 conditionally excludent blocks (or <v-if> and v-else, and now I use <span> and <div> for each).
This was the original code that does not work. The problem is that it did not update the component once the condition ('root.authentication') is changed, but seamlessly, the <p> tag is updated successfully (why <Button> not?):
<template>
<span v-if="root.authentication" data-id-logout-box>
<p>Logout</p>
<Button :root="root" text-label-preset="Salir" :on-click-preset="root.logout" />
</span>
<span v-else data-id-login-box>
<p>Login</p>
<Button :root="root" text-label-preset="Entrar" :on-click-preset="root.login" />
</span>
</template>
This second code does the trick. The only difference is that, in the previous, there were 2 span tags, while in this one, there is 1 span and 1 div tag:
<template>
<span v-if="root.authentication" data-id-logout-box>
<Button :root="root" text-label-preset="Salir" :on-click-preset="root.logout" />
</span>
<div v-else data-id-login-box>
<Button :root="root" text-label-preset="Entrar" :on-click-preset="root.login" />
</div>
</template>
I have tried to do it changing the class attribute applied to that elements, and also playing with data-* attributes, as you can see in the example. But none of them worked.
My quesiton is, as I do not have infinite tags to make it work, how could I do the workaround for this, in order to make it work with infinite nested <v-else-if>?
Thank you.
If and else elements are identical that's causing this issue. when you are changing else part to div fixes because how vue update and render template.
for more details
https://snipcart.com/blog/vue-render-functions
you can give first span and second span unique keys and that should solve the problem.
<div class="flex">
<div class="layout-row layout-align-end-center">
{{#paper-button href="overview" raised=true primary=true}}Overview{{/paper-button}}
{{#paper-button href="incomes"}}Incomes{{/paper-button}}
{{#paper-button href="expenses"}}Expenses{{/paper-button}}
{{#paper-button href="settings"}}Settings{{/paper-button}}
</div>
</div>
So I am trying to set the raised=true whenever I am on certain page/template. The above code is from my application template. Is there any way of doing this using JS/Ember or should I just do it manually in each of my templates?
I think the best way to go is to write a custom component wrapping paper-button. ember-route-helpers gives you nice helpers to do that:
{{#paper-button
onclick={{transition-to #route)
href=(url-for #route)
raised=(is-active #route)
primary=(is-active #route)
}}
{{yield}}
{{/paper-button}}
Then you can use that component with {{#your-component route="settings"}}Settings{{/your-component}}.
It's important to understand that you should pass both the action and the href. Because then when people click on the button it will make a transition and dont reload the entire page, but rightlick->open and screenreaders are are not broken.
I am creating a program for my Universities Research department, the program is for the operation of an Atomic Layer Deposition system.
The program needs to be able to allow the user to set a custom 'recipe' if you will, each grid-item will have a button with 'edit' in the bottom corner, and will take you to a separate page where you can enter your system stats like zone temps, durations, cycles, etc. We have gotten the draggable grid-items working, so that we could make the system run multiple steps over and over if we wish, but here is my goal I can't seem to accomplish:
We need to be able to add a new 'step' grid-item on button click, and we need to be able to remove a grid-item as well. I have created a button 'New Tile' and I defined a function I was hoping would work, I was trying to see if I could duplicate a grid item, but when I run the program and click the button I get the error:
"[Vue warn]: Property or method "duplicate" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties."
Image of app: https://imgur.com/a/DgKebPR
image of JS trying to be used: https://imgur.com/a/EjW4t6d
<h2 style="color: #f6a821;">Steps</h2>
<hr class="hr" />
<grid-layout
:layout.sync="stepsGrid"
:col-num="8"
:row-height="75"
:is-draggable="true"
:is-resizable="false"
:is-mirrored="false"
:vertical-compact="true"
:margin="[50, 50]"
:use-css-transforms="true">
<div id="duplicater">
<grid-item
:x=stepsGrid[0].x
:y=stepsGrid[0].y
:w=stepsGrid[0].w
:h=stepsGrid[0].h
:i=stepsGrid[0].i
:isDraggable=stepsGrid[0].isDraggable>
<div class="Panel__name">1</div>
<div class="editButton">
<router-link to="/Parameters-template" class="editButton">Edit</router-link></router-link>
</div><br>
<div class="Panel__status">Status:</div>
</grid-item>
<div id="bottombuttons">
<button id="resetbutton">Reset</button>
<button id="startbutton" #click="duplicate()">New Tile</button>
</div>
</div>
I don't get where is declared the duplicate method extactly. Don't expect it to be available from a template if it's not declared in the component's methods. Try:
methods: {
duplicate() {
/* */
}
}
in the same component. If it needs to be a shared among several components, put this in a mixin.
I'm following this tutorial to learn Meteor. After adding the first JS code, I'm getting [object Object] on my browser. I've followed everything as explained (except for some names that I have changed, but I haven't used any reserved words), but I cannot see anything else. This part is in the first 4 minutes. This is how my files look:
demonstration.js:
CalEvents = new Meteor.Collection('calevents');
Session.setDefault('editing_calevent', null);
Session.setDefault('showEditEvent', false);
Meteor.Router.add({
'/':'home',
'/calendar':'calendar'
})
calendar.html:
<template name="calendar">
<div id="calendar">
Hello world! Now at calendar.
</div>
</template>
home.html:
<template name="home">
<div class="hero-unit">
<p>Manage your calendar</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</template>
demonstration.html:
<head>
<title>Calendar app</title>
</head>
<body>
{{>menu}}
<div class="container-fluid">
<div class="row-fluid">
{{renderPage}}
</div>
</div>
</body>
I suspect it has something to do with the Meteor.Router.add() line, because the little I did prior to adding this worked. I have tried changing the page to show on '/' to other pages that contained a simple text, but it didn't work.
Edit to add: I am working thru Nitrous.io and I installed Meteorite prior to adding the router package.
Thanks in advance.
PS: I have searched in here and on Google but I haven't been able to find any answer to this question. If there is one, kindly point me to the right address.
Lots of examples that use Meteor prior to version 0.8 will not work, so make sure you check out a recently updated example, like those on Discover Meteor.
In this case, router has been fixed to support Meteor 0.8 and your example will work by replacing {{renderPage}} with {{> renderPage}}. However, the rest of the example probably won't work, and as others have mentioned, router has been deprecated for Iron Router.