I built a project like instagram using laravel and vue.js. it has models like : profile, post, user. I just want to hide the follow button when a user wants to follow itself. In real instagram app we can't follow ourselves because there isn't any follow button in our own profile.
I made a condition that if the profile's userId equals to userId, the button hides but it doesn't work. Any opinion? Please help
This is the code that i have tried:
$profileId=auth()->user()->$profile->user_id;
$userId= $user->id;
In the view :
#if($userId == $profileId)
<follow-button my-user-id="{{ $user->id }}" my-profile-id="{{$profileId}}" follows="{{ $follows }}"></follow-button>
#endif
Looking at the code you provide, i think that follow button is a vue component.
If so, just use v-if="" or v-show="" to conditionally display the button.
From the docs:
v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.
In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.
Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.
You probably should do something like this:
//In your view where you want to display the follow button component:
<follow-button
my-profile-id="{{ $profileId }}"
my-user-id="{{ $user->id }}"
follows="{{ $follows }}"
v-if="{{ $profileId !== $user->id }}"
>
</follow-button>
Here you can read more about conditional rendering.
Related
When you enter the page for the first time, it should be fade up, but it's fade down. This problem seems to be caused by not only the fade-up effect when scrolling down the page, but also the fade-down effect when scrolling up the page. I only set the fade-up effect to the code.
How can I make it only fade up?
The web page and code are below.
https://www.dorothycard.com/v/48dc3e5f
<div class="mx-4" data-aos="fade-up" data-aos-duration="1500" data-aos-once=“true”>
When I inspect your page, all the animated elements have the following attribute:
data-aos-once=""true""
when that attribute should be:
data-aos-once="true"
The first sets the attribute to the string "true" which is quite different from the boolean true (which is what is expected).
I do not know how you set this attribute in your source, but you will want to look there for a fix to your issue.
Note that if you want ALL your animations in the page to only run once, you could also pass that option in the AOS.init() function call:
AOS.init({
// ... your other initialisation options here ...
once: true,
});
and you could then remove all individual data-aos-once attributes.
I have a form based on selects for a search with filters (picture attached below).
When i pressed the search button, the page reloads and it reset all the selects.
I try to use the old helper, but it does not work properly, it just takes the first option of the select( and it gets rid of the default option as you can see in the pictures below)
Things to know:
it is a form with a get action, it is not intended to store or edit something, only for search. So, how can i properly get the old data when refresh or after pressing the search button?
This is my first attempt and it did not work
same for this one too.
as you can see in this image, it deletes the default option, and it shows the first option
The old() function will get data by specific key from the flash data. That means you must set the data as a flash before using the old().
Source: https://github.com/laravel/framework/blob/e6c8aa0e39d8f91068ad1c299546536e9f25ef63/src/Illuminate/Http/Concerns/InteractsWithFlashData.php
Documentation: https://laravel.com/docs/5.8/requests#old-input
In the case, if you want to refresh and keep the input, I suggest using the front-end handling way: When you change the input of drop-down list, push the new query string param into the URL by javascript (How can I add or update a query string parameter?) . Until the user tries to refresh the page, the URL was kept your old value. In the blade form, you can use the function to get the param from GET request with a priority higher than the old() function, I don't actually remember the function to get param from URL, but it will seem like:
{{ Request::get('yourInput') ?? old('yourInput') ?? $realEntity->yourInput }}
Use the following in your blade files. You can check if the name exists in the url (query string). Hope this helps :)
{{ Request::get('name') }}
I think, that old() function should work just fine, but you should compare the value of option in foreach.
<select name="tipo_propiedad">
#foreach ($tipos_propiedades as $tipo_propiedad)
<option value="{{$tipo_propiedad->id}}" #if($tipo_propiedad->id == old('tipo_propiedad') selected #endif(>{{$tipo_propiedad->name}}</option>
#endforeach
</select>
I would like to have a default value for my model attribute:
_form.blade.php code: {!! Form::text('attribute','Default Value') !!}
As _form.blade.php is shared for both create.blade.php and edit.blade.php, both views are always displaying the default value: Default Value.
What's the properly way to have a default value only for CREATE view?
So EDIT view should always display the value of the saved model.
It seems like a dumb question, but I'm a long time puzzling over this and I would like to know the properly way to do that.
I have some ideas, such as:
Do not use a shared file for create/edit (_form.blade.php) (I think it's not a good idea).
Set the default variable in the controller (also not good).
{!! Form::text('name', (isset($savedModel)) ? $savedModel->name : "your default value") !!}
I haven't tried a ternary inside a Form facade element, but it may work.
I believe what you want is this:
<input name="field" value="{{ old('field', isset($model->field) ? $model->field : '') }}"/>
Here's the breakdown:
If they edited/saved(first time) the form and the save failed, but was back()->withErrors(), this value will be used.
If they just invoked the "edit" view with no changes, the $model->field will be used.
If they are creating the model but have not attempted a save yet, no value will be used. ('')
This should cover all scenarios.
From my experience it's typically better not to share views between create/edit operations. You run into a lot of conditional logic that can be avoided and you get a cleaner user experience when displaying form errors and such.
As far as displaying a default value for the Create view, I use the old('attribute', 'Default Value') helper method to achieve this.
I have been exploring Angular X-editable project for a while and came across this odd behavior.
Whenever I click on any one of the 3 'select' components and try to change the value from the dropdown, the method 'showStatus(..)' gets fired for other components as well that are inside the ng-repeat boundary. (which you can check through the console.)
Can you please tell me why is this happening? Am I missing something.. ?
EDITED LINK -> Fiddle : http://jsfiddle.net/hrr4M/4/
<span ng-repeat="d in list" >
<a href="#" editable-select="d.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(d.status) }}
</a> <br/>
</span>
The problem you have is that your binding
{{ showStatus(d.status) }}
fires up the function for every item, because as every item gets populated, it just refreshes and fires again, all of them.
This is not the right place to set this up.
I set up a modified fiddle for you: http://jsfiddle.net/hrr4M/13/
Inside the link statement I added
onaftersave="showStatus($data)"
That way, you can fire a function after an item has been selected (see docs for onaftersave vs onbeforesave), and you can get the selected value using $data.
Now it works already. The problem is, that your binding is still using the same function, and therefore firing up all the time.
I duplicated the function and renamed it to repeatFiller with the same functionality but omitting the console logs, so you can see it works. You might tweak that a bit but I think it does what you need.
php:
if(form not filled out correctly){
What do i do?
}
... create zip...
DownloadController::sendZipHeader($zip, $zip_name, $data_size);
If the form is filled out correctly, the page won't change. The only thing that will happen is the download will start.
If form is filled out incorrectly, i'd still like the page not to change/redirect just like if a download occurred.
Calling exit; and returning null will bring the user to an empty page. (not what I want)
I'd like to know if there's a way to do this without ajax/redirecting back to the download page?
One work around I thought of would be to send an empty file or something but I'm curious if there's a cleaner work around.
If you'd like to show the form again just return the form view once more.
A better option though would be to redirect the user back to the form as it provides a more fluid user experience. You should also alert the user of the errors that were encountered and why the form could not be processed.
return Redirect::to('/download_form')->with('error', 'You did not fill out the form correctly.');
Then, in your download form view, you can output this error.
#if (Session::has('error'))
{{ Session::get('error') }}
#endif