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.
Related
I am laravel developer and developing a real time chat room using liveware , i am trying to open chat when i click to user but unfortunatly i am getting error https://flareapp.io/share/OmVDe437#F47 please help me how can resolved that ? thank u.
I am also getting error in console.
app\Http\Livewire\Messaging.php
public $selectedConservation;
public function mount(){
$this->selectedConservation = Conservation::query()
->where('sender_id',Auth::user()->id)
->orwhere('reciever_id',Auth::user()->id)
->first();
}
public function viewMessages($conservationsId){
$this->selectedConservation =
Conservation::findorFail($conservationsId);
}
public function render()
{
$conservation = Conservation::query()
->where('sender_id',Auth::user()->id)
->orwhere('reciever_id',Auth::user()->id)
->get();
return view('livewire.messaging',[
'conservation' => $conservation,
]);
}
resources\views\livewire\messaging.blade.php
#foreach ($conservation as $conservations)
<a href="#" wire:click.prevent="viewMessages({{ $conservations->id}} )">
<div class="user-card rounded bg-dark bg-opacity-10 mb-1">
<div class="mx-2">
<div class="d-flex pt-3">
<img class="rounded-circle" width="48px" height="48px" src="{{Config('wfh.file').$conservations->reciever->avator}}" alt="">
<div class="notification-text ms-3 w-100">
<span class="username fw-bold">{{$conservations->reciever->full_name}}</span>
<span class="float-end small"></span>
<p class="mt-1 text-muted">You: </p>
</div>
</div>
</div>
</div>
</a>
#endforeach
Check out the documentation on Dom Diffing Issues. It looks like you need to add a wire:key="{{ $conversations->id }}" attribute into your a tag so that Livewire can track changes to the list of conversations.
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`
},
I have a switch block in my thymeleaf page where I show an image depending on the reputation score of the user:
<h1>
<span th:text="#{user.reputation} + ${reputation}">Reputation</span>
</h1>
<div th:if="${reputation lt 0}">
<img th:src="#{/css/img/troll.png}"/>
</div>
<div th:if="${reputation} == 0">
<img th:src="#{/css/img/smeagol.jpg}"/>
</div>
<div th:if="${reputation gt 0} and ${reputation le 5}">
<img th:src="#{/css/img/samwise.png}"/>
</div>
<div th:if="${reputation gt 5} and ${reputation le 15}">
<img th:src="#{/css/img/frodo.png}"/>
</div>
<div th:if="${reputation gt 15}">
<img th:src="#{/css/img/gandalf.jpg}"/>
</div>
This statement always returns smeagol (so reputation 0), eventhough the reputation of this user is 7: example
EDIT:
I was wrong, the image showing was a rogue line:
<!--<img th:src="#{/css/img/smeagol.jpg}"/>-->
but I commented it out. Now there is no image showing.
EDIT2:
changed my comparators (see original post) and now I get the following error:
The value of attribute "th:case" associated with an element type "div" must not contain the '<' character.
EDIT3:
Works now, updated original post to working code
According to the documentation, Thymeleaf's switch statement works just like Java's - and the example suggests the same.
In other words: you cannot do
<th:block th:switch="${reputation}">
<div th:case="${reputation} < 0">
[...]
but would need to do
<th:block th:switch="${reputation}">
<div th:case="0">
[...]
which is not what you want.
Instead, you will have to use th:if, i.e. something like this:
<div th:if="${reputation} < 0">
<img th:src="#{/css/img/troll.png}"/>
</div>
Change
<div th:case="0">
<img th:src="#{/css/img/smeagol.jpg}"/>
</div>
to
<div th:case="${reputation == 0}">
<img th:src="#{/css/img/smeagol.jpg}"/>
</div>
I'm having a difficulty passing my 'product' object to the controller. How can I do it? I'm not getting errors. The problem is that the 'product' object is null on my controller.
html:
<section th:each="menu : ${allMenus}">
<button
<h1 th:text="${menu.name}"></h1>
</button>
<div>
<div th:each="product : ${menu.productList}">
<a data-toggle="modal" th:href="'#' + ${product.name} + 'Modal'">
h5 th:text="${product.name}"></h5>
<small th:text="${product.price} + '$'"></small>
<p th:text="${product.description}"></p>
</a>
<div th:replace="/productModal :: productModal(product=${product})"></div>
</div>
</section>
Modal:
<div th:fragment="productModal(product)">
<div role="document">
<form method="post" th:action="#{/addItemToCart}">
<div th:each="topping : ${product.toppings}">
<input type="checkbox" th:id="${topping} + ${product.id}" name="checkedToppings" th:value="${topping}" />
<label th:for="${topping} + ${product.id}" th:text="${topping}"></label>
</div>
<div>
<button type="submit">Add to Shopping Cart</button>
</div>
</form>
</div>
</div>
controller:
#RequestMapping(value="/addItemToCart", method=RequestMethod.POST)
public String addItemToCart(#ModelAttribute("product") Product product, #RequestParam("checkedToppings") List<String> toppings)
{
//product is null;
//checkedToppings are retrieved correctly
return "redirect:/menu";
}
Short answer:
you don't post objects to controllers using HTML.
Details:
You will never be able to post a "product" object to your controller from an HTML page.
Instead,
you should send identifying information about the desired "product" to the controller,
perhaps a product-id or some other product-unique-identity-blammy.
Response to options in comments:
Hackers love hidden fields and JavaScript;
I recommend against using those for this situation.
I believe that you only have one option: identifying info.
This does not need to be a "real" product number.
You can generate a UUID and store a map in the choose one: (Servlet Session, Database, Application Session, somewhere else on the server) that maps from the UUID to the desired product.