I am faced with a frequent problem in react botostrap,sometimes grid offset props does not work, and only normal bootstrap classes work for me.
code:
<Carousel.Item >
<div className="item-container d-flex flex-column flex-wrap ">
{
this.categories.map(category => {
return (
<Card className="px-2 category__card col-xl-4 col-sm-6">
<div className=" car-container" style={category.style}>
<Card.Body>
<Card.Title className="text-white font-weight-normal text-uppercase ">
<h3>
{category.title}
</h3>
</Card.Title>
<Button variant="light rounded-0" >View Products</Button>
</Card.Body>
<Card.Img variant="bottom" src={category.img} className="card-image"/>
</div>
</Card>
);
})
}
</div>
</Carousel.Item>
This code works as i used normal bootstrap classes in Card component col-xl-4 col-sm-6 but it does not work when i remove these classes and use react-bootstrap props sm={6} xl={4}
I can use bootstrap classes and be happy but i need to make the width of the cards in carousel item dynamic so why i am asking the question, what may be the reasons behind these props does not work???
Related
I'm building a form in Laravel's Blade syntax, and using AlpineJs for some interactivity stuff like showing and hiding content.
My code is here:
<div class="flex items-center" x-data="destinationBuilder">
<x-label required="true" class="mr-5">Destination:</x-label>
<x-basic-input #change="handleDestinationChange" ::value="destination" placeholder="https://google.com"/>
<x-buttons.primary class="ml-5" #check="validateDestination">Check</x-buttons.primary>
</div>
<div class="mt-4">
<button type="button"
class="p-5 w-full text-sm grid grid-cols-[min-content_min-content_auto_min-content] items-center gap-x-3 font-light text-gray-400 hover:bg-gray-300 rounded-full"
#click.camel="toggleAdvancedOptions">
<i class="lni lni-cog"></i>
<span class="whitespace-nowrap">Advanced options</span>
<div class="h-px w-full bg-gray-400"></div>
<i class="lni lni-chevron-down"></i>
</button>
<div x-show="advanced" x-transition x-cloak>
{{-- <x-links.get-parameter-form/>--}}
</div>
</div>
#push('footer-scripts')
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('destinationBuilder', () => ({
destination: '',
advanced: false,
handleDestinationChange() {
if (this.validateDestination()) {
// emit constructed destination up
}
},
validateDestination() {
// check url is in a legit form (with https)
// basic is just url input
// advanced dropdown with get parameters, fragment, http protocol and port
},
toggleAdvancedOptions() {
this.advanced = !this.advanced;
}
}));
})
</script>
#endpush
I'm using a property named advanced to bind to x-show for another component.
When I look in my browser I get the following message: app.js:434 Uncaught ReferenceError: advanced is not defined
I'm not sure if this is due to a weird collision with blade or if I'm missing something fundamental with Alpinejs. I tried renaming the variable to showAdvanced but that didn't work either. I would expect advanced to be recognised as a property and bind to x-show as expected. What am I doing wrong here?
You have the following HTML structure:
<div x-data="destinationBuilder">
...
</div>
<div>
<div x-show="advanced">
...
</div>
</div>
As you see, the second div is not a child element of the first one where the x-data is defined, so it's outside of the scope of destinationBuilder component. Just create a common div (or similar) element that embeds both divs and apply the component x-data there, so each div will have access to the component's scope.
Sorry. I face some problem on how to display the data that nested in array.(Vue js)
Here is the return array
I would to show the data in total_billed_by_year
I tried several other attempts but nothing works.
Could please someone help me out with this?
getInfo(index){
this.popup = true;
this.inquiryForm.total_contractual=this.pageData.ppr_data[index].total_contractual;
this.inquiryForm.bil_year =this.pageData.ppr_data[index].total_billed_by_year[index].bil_year;
this.inquiryForm.bil_total_amount =this.pageData.ppr_data[index].total_billed_year.bil_total_amount;
},
<vs-popup :active.sync="popup">
<div class="vx-row mb-base">
<div class="vx-col lg:w-1/2 w-full mb-base">
<vx-card
title="Total Bill"
icon="/images/task.png"
headerClass="bg-dark pb-6"
titleColor="#fff"
subtitleColor="#fff"
>
<template slot="no-body">
<div
id=""
class="transition-all duration-500 ease-in-out p-4"
>
<div class="grid lg:grid-cols-3 grid-cols-1">
<div class="mt-5 ml-2">
<h5>Total Contractual Amount</h5>
<div class="text-lg">
<div v-if="inquiryForm.total_contractual">
<div>RM {{inquiryForm.total_contractual}} </div>
</div><div v-else>-</div></div>
</div>
<div class="mt-5 ml-2">
<h5>Bill {{inquiryForm.bil_year}} </h5>
<div class="text-lg">
<div>RM {{inquiryForm.bil_total_amount}}
</div>
</div>
</div>
</div>
</template>
</vx-card>
</div>
</div>
</vs-popup>
<vs-list-item
class="hover:shadow"
v-for="(tr, index) in ppr"
v-bind:key="index"
>
<template slot="subtitle">
<div #click="getInfo(index)" class="cursor-pointer">{{tr.id}}</div>
</template>{{tr.total_billed_by_year[index].bil_year}}
<span class="font-bold truncate overflow-auto">{{tr.month}} -{{tr.year}}
<p v-for="(bill,ind) in tr.total_billed_by_year" v-bind:key="ind">
{{bill.bil_year}}{{bill.bil_total_amount}}
</p>
</span>
</vs-list-item>
I think the easiest way would be make your column total_bil_year to return as a array via casting from its model. Something like below (if total_billed_by_year column is a json column)
protected $casts = [
'total_billed_by_year' => 'array'
];
Based on the image you attached to the question shows that it is returned as a json. So you can convert it as object at vue also. Something like below
JSON.parse(tr.total_billed_by_year) which will convert into a array and that array contain the object. See the below image. I just reproduced it at console
you can use it like below. Or just make a function to convert your jsons to objects where you can use it when you want
</template>{{JSON.parse(tr.total_billed_by_year)[0].bil_year}}
baby, using JSON.parse(yourJSONString) to transform your json string to json object.
Hi Im struggling to get the value of each radio button groups. The functions is about getting answers from different questions.
{{form.answer_ids}}
<div v-for="ans in answers" :key="ans.id">
<div v-if="ans.question_id == question.id">
<div class="p-2 border rounded border-secondary m-2" >
<input
style="cursor:pointer;"
class="form-check-input m-2"
type="radio"
:name="ans.question_id"
:value="ans.id"
v-model="form.answer_ids"/>
<h5 class="ml-4 p-1" v-html="ans.description"> </h5>
</div>
</div>
</div>
<script>
data() {
return {
form: this.$inertia.form({
answer_ids:[]
}),
}
},
</script>
When there is v-model, the radio is not grouping yet returning only 1 value (not array), On the other hand, When I Remove v-model, The grouping is working but unable to get the data.
How can i possibly achieve this? Just taking the checked radio answer ids is enough for me.
Thank you very much and have a good day!
I am trying to perform concatenation in img tag and here below is what i am trying to do:
<div class="vx-row">
<div v-for="item in items" class="vx-col" v-bind:key="item.id">
<div class="w-full mb-base">
<vx-card>
...
<img :src="require('./img/stars_' + item.id + '_logo.png')" alt=""/>
...
</vx-card>
</div>
</div>
</div>
I am trying to concatenate the item.id to the image path as i am making my code dynamic such that when the cards are displayed then the respective image is displayed.
Please let me know how it can be done, initially i could see images in respective cards but then i tried using
<img :src="require(`./img/stars_${this.$route.params.item_id}_logo.png`)">
in other components then i get error every where.
Here is the error that i get everywhere:
Here you can try a shorthand that webpack will use.
HTML:
<img :src="getByPath(item.id)" v-bind:alt="item.id">
Method:
getByPath(id) {
return require('./img/stars_' + id + '_logo.png')
}
you can do with method like below code
try this:
<div class="vx-row">
<div v-for="item in items" class="vx-col" v-bind:key="item.id">
<div class="w-full mb-base">
<vx-card>
...
<img :src="getImgUrl(item.id)" alt=""/>
...
</vx-card>
</div>
</div>
</div>
and create method:
getImgUrl(value) {
return `./img/stars_${value}_logo.png`
},
Is it possible to load a component dynamically when clicking a list item in vuejs 2.0 and laravel 5.3? I have a standard Laravel app but on one section of the site (shows reports) I want to turn this page into a single page application using vuejs. I load the default report in using a vue component and all works well, like so:
<div class="col-md-3 col-sm-6">
<div class="card-box">
<h2>Reports</h2><br>
<ul>
<li>Daily</li>
<li>Weekly</li>
<li>Season</li>
<li>Label</li>
<li></li>
</ul>
</div>
</div>
<div class="col-md-9 col-sm-6">
<div class="card-box main">
<reports-homepage></reports-homepage>
</div>
</div>
What I'm trying to achieve is when one of the li items is clicked the <reports-homepage></reports-homepage> is changed dynamically according to which li is pressed. So it could become <reports-daily></reports-daily> for example.
I've tried putting a #click on the li component and catching that in a script below in the blade section but that gives me the following error:
[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>.
As pointed in the official documentation you can use dynamic components. In your case it could look something like this:
HTML
<div id="app">
<div class="col-md-3 col-sm-6">
<div class="card-box">
<h2>Reports</h2><br>
<ul>
<li #click="setComponent('daily')">Daily</li>
<li #click="setComponent('weekly')">Weekly</li>
<li #click="setComponent('season')">Season</li>
<li #click="setComponent('label')">Label</li>
</ul>
</div>
</div>
<div class="col-md-9 col-sm-6">
<div class="card-box main">
<component v-bind:is="currentComponent"></component>
</div>
</div>
</div>
JS
var vm = new Vue({
el: '#app',
data: {
currentComponent: 'daily'
},
components: {
'daily': { /* component object */ },
'weekly': { /* component object */ },
'season': { /* component object */ },
'label': { /* component object */ }
},
methods: {
setComponent: function (component) {
this.currentComponent = component;
}
}
})
And that should do what you are trying to achieve. Let me know if it helped!