I have created Vue template which works fine when it is not used inside #if , but it return black if used inside #if.
Here is my template
<template>
<div>
<usage-token-button :tokens="usageTokens" v-on:use-token="useComplimentaryToken">
<template v-slot:default="data">
<span class="d-inline-block">
ABC
</span>
</template>
<template v-slot:use-button>ABC</template>
</usage-token-button>
<usage-token-button :tokens="researchPasses" v-on:use-token="useResearchPassToken">
<template v-slot:default="data">
<span class="d-inline-block">
ABC
</span>
</template>
<template v-slot:use-button>ABC</template>
</usage-token-button>
</div>
</template>
and this is how it is called
#if(!isset($showdata))
<usage-token-access
doi="{{ $content->metaInfo()['content']->doi }}"
root="{{ config('app.subdir') ? config('app.subdir') : '/' }}">
</usage-token-access>
#endif
I have confirmed it is going inside if condition , and when I inspect it I can see blank div as show in screenshot
Related
I am using UIKIT Lightbox to display post images like Facebook as below:
Controller
$postImages = postsImages::where('postId', $post->postId)->limit(3)->get();
Blade
<div class="uk-child-width-1-3#m" uk-grid uk-lightbox="animation: slide">
#foreach ($postImages as $postImage)
<div>
<a class="uk-inline" href="{{$postImage->imageLink}}">
<img src="{{$postImage->imageLink}}">
#if ($loop->last && $post->hasImage > 3)
<div class="uk-overlay-default uk-position-cover more">
<div class="uk-position-center">
<h1>+{{$post->hasImage - 3}}</h1>
</div>
</div>
#endif
</a>
</div>
#endforeach
</div>
I limited the image thumbnails to 3 and the rest will be shown as +number_of_remaining_photos same like Facebook.
The problem is that when I click on a thumbnail to make it large and view the rest then I can see only those three images which I limited.
I went through UIKIT lighbox documentation and I found items option but I don't know how to use it in order to view all the images of that post by creating another query like below:
$postImages = postsImages::where('postId', $post->postId)->get();
to get all images there and showing it in the lightbox.
P.S. I am not sure, that is item option for that purpose or not. )
This is a practical solution.
1- Make another query without limit.
$postImagesAll = postsImages::where('postId', $post->postId)->get();
2- Add data-uk-lightbox="{group:'my-group'}" attribute to the result of both queries like below and everything will work fine:
<div class="uk-grid-collapse" uk-grid uk-lightbox="animation: slide;">
#foreach ($postImages as $postImage)
<div>
<a class="uk-inline" href='/storage/posts/{{$postImage->imageLink}}' data-uk-lightbox="{group:'my-group'}">
<img src="{{$postImage->imageLink}}"/>
#if ($loop->last && $post->hasImage > 3)
<div class="uk-overlay-default uk-position-cover more">
<div class="uk-position-center">
<h1>+{{$post->hasImage - 3}}</h1>
</div>
</div>
#endif
</div>
</a>
</div>
#endforeach
#foreach ($postImagesAll as $postImage)
<a class="uk-hidden" href="{{$postImage->imageLink}}" data-uk-lightbox="{group:'my-group'}"></a>
#endforeach
</div>
I am getting menu like below from api request with laravel vue.
{"data":[{"id":67,"slug":"link","name":"Dashboard","href":"\/","hasIcon":true,"icon":"mdi mdi-home-account","iconType":"coreui","sequence":1}]}
and my componant is below and displaying well but click event not woking , when i mannully put this json data --> menu then every thing working good. so i think mounted is not working as per expectation in this senario. i tried like passing it from another component as props , then putting it in data --> menu but not working as well any idea ?
<template>
<div class="vertical-menu">
<div data-simplebar="init" class="h-100 mm-show">
<div id="sidebar-menu">
<ul class="metismenu list-unstyled" id="side-menu">
<li v-for="(item, index) in menu" :key="index">
<router-link :to="item.href ? item.href : ''" :class="item.slug === 'dropdown' ? 'has-arrow' : '' ">
<i :class="item.icon"></i>
<span :data-key="item.datakey">{{item.name}}</span>
</router-link>
<ul class="sub-menu" aria-expanded="false">
<li v-for="subItem in item.elements" :key="subItem.name" >
<router-link :to="subItem.href ? subItem.href : ''"> {{subItem.name}} </router-link>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name:"DashboardLeftBar",
props:['app_base_url'],
data(){
return {
menu: null
}
},
mounted(){
this.menuSideBar();
},
methods:{
menuSideBar(){
let token= localStorage.getItem('jwt');
let crl=JSON.parse(localStorage.getItem('user')).crl;
axios.post(myconstant.APPICATION_API_URL+'/getmenu',{
token: token,
crl: crl,
}).then((response) => {
this.menu = response.data.data;
});
}
}
}
</script>
could you please help?
I 'm trying to add a count down according to some property in a loop but I could not find any way (not by trying out nor by googling) how I could pass that value in my functions:
<template x-for="item in cartData.items">
[...]
<template x-if="item.product_type == 'test'">
<div x-data="getCountdown()" x-init="init()">
<span x-text="timeLeft(item.timerEnd)"></span>
</div>
<script type="text/javascript">[...]
</script>
</template>
</template>
I was trying to pass item.timerEnd to every functon (getCountdown, init and timeLeft) but I always get the error that item is undefined, wheras if I pass it eg. to
<span x-text="new Date(item.timerEnd).toLocaleString()"></span> this works.
What am I missing?
PS: Thanks fpr the first help here: How to make timer in alpine.js app with time interval
Do this $data.item.timerEnd.
Like this:
<template x-for="item in cartData.items">
[...]
<template x-if="item.product_type == 'test'">
<div x-data="getCountdown($data.item.timerEnd)" x-init="init($data.item.timerEnd)">
<span x-text="timeLeft($data.item.timerEnd)"></span>
</div>
<script type="text/javascript">[...]
</script>
</template>
</template>
Im using laravel, vue, and bootstrap-vue.
I have created a vue component that displays a table of elements (subnets in this example).
For each of them I show a component (modal_edit-subnet) thats should open a modal that allows to edit the data of the element of the related row.
The problem is that it shows modals for all of the table elements. For example, if the table has 3 rows, it shows 3 modals (after closing one it shows the next). Each of the modals with the data of each of the rows.
I've tried to add "key"s but no success.
What am i doing wrong?
Thanks!
Component that shows the table
<template>
<div>
<b-card class="text-center">
<b-table small striped hover :items="data_subnets" :fields="fields" :tbody-tr-class="rowClass">
<template slot="[ip_address]" slot-scope="data_subnets">
<b>{{ long2ip(data_subnets.item.ip_address) }}</b>
</template>
<template slot="[actions]" slot-scope="data_subnets">
v-on:deleteSubnet="deleteSubnet"></modal_delete-subnet>
<modal_edit-subnet :key="'modal_edit_subnet' + data_subnets.item.id" :subnet="data_subnets.item" v-on:editSubnet="editSubnet"></modal_edit-subnet>
</template>
</b-table>
</b-card>
</div>
</template>
Modal modal_edit-subnet
<template>
<div>
<b-button size="sm" v-b-modal.modal-edit-subnet>Edit</b-button>
<b-modal
id="modal-edit-subnet"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
The problem is that:
You're rendering a modal for each row of the table and;
Reading the docs, it seems like the modal is triggered by the id, and your b-modal id is not dynamic depending on the row.
How to fix it:
Use just one modal on the b-table level
Dynamically inject id into your modal_edit-subnet component:
<template>
<div>
<b-button size="sm" v-b-modal[id]>Edit</b-button>
<b-modal
:id="id"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
<script>
export default {
props: {
id: {
type: String | Number
}
}
}
</script>
Use v-model (this is the way I would do it)
<template>
<div>
<b-button size="sm" #click="show = true">Edit</b-button>
<b-modal
v-model="show"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
Hey I use Algolia on my new Laravel project but I get into this
that Algolia displays all data that I have " Titel - description ".
What I want is only display result when I type something in the search box.
my Html Code
<div id="app">
<!-- Components will go here -->
<ais-index app-id="{{ config('scout.algolia.id') }}"
api-key="{{ env('ALGOLIA_SEARCH') }}"
index-name="posts">
<ais-search-box placeholder="Find products..."></ais-search-box>
<ais-results>
<template slot-scope="{ result }">
<div>
<h4>#{{ result.progName }}</h4>
<ul>
<li>#{{ result.description }}</li>
</ul>
</div>
</template>
</ais-results>
</ais-index>
</div>
Post Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;
class Post extends Model
{
//
use Searchable;
}
You should replace ais-results by a component which hides it based on the query. The component looks something like this:
<!-- MyResults.vue -->
<template>
<div v-if="query.length > 0">
<slot name="header"></slot>
<slot name="default" v-for="(result, index) in results" :result="result" :index="index">
{{index}}. Result 'objectID': {{ result.objectID }}
</slot>
<slot name="footer"></slot>
</div>
</template>
<script>
import { Component } from 'vue-instantsearch';
export default {
mixins: [Component],
computed: {
query() {
return this.searchStore.query;
},
results() {
return this.searchStore.results;
},
},
};
</script>
Then replace your usage for ais-results with your own my-results component:
<div id="app">
<!-- Components will go here -->
<ais-index app-id="{{ config('scout.algolia.id') }}"
api-key="{{ env('ALGOLIA_SEARCH') }}"
index-name="posts">
<ais-search-box placeholder="Find products..."></ais-search-box>
<my-results>
<template slot-scope="{ result }">
<div>
<h4>#{{ result.progName }}</h4>
<ul>
<li>#{{ result.description }}</li>
</ul>
</div>
</template>
</my-results>
</ais-index>
</div>