I have a template which I run a for
<tr v-for="entry in filteredData">
<td>
#{{ entry.position}}
</td>
<td :class="addNewElement(entry.value)">
</td>
<td>
#{{ Math.round(entry.chanceOfApproval*100) }}
</td>
</tr>
I need that the method addNewElement append a div into this column, but I don't know how can I do that in my template
The answer depends on the version of Vue.js you are using. For a given Vue instance
{
...
methods: {
renderEl() {
return '<div>...</div>'
}
}
}
In Vue 1.x you can do (docs)
{{{ renderEl () }}}
In Vue 2.x you can do (docs)
<div v-html="renderEl()"></div>
Related
i'm developing a shopping cart with laravel and vuejs i'm new to programming. I want to get the total amount of the products in the shopping cart but I don't understand how to do it.
any help is appreciated
I am using vuejs components, in my data element I have a cart that is the one who has the cart with the products.
<script >
import Axios from 'axios'
export default {
data(){
return{
csrf: document.head.querySelector('meta[name="csrf-token"]').content,
carrito: [],
}
},
mounted(){
Axios.get('carrito')
.then(Response => {this.carrito = Response.data})
},
}
</script>
Inside my template I have a table where it traverses the products with the v-for directive, I would like to have the total in a but I don't understand how I can do this operation
<table class="table">
<thead>
<tr>
<th scope="col">Producto</th>
<th scope="col">Cantidad</th>
<th scope="col">precio</th>
<th scope="col">total</th>
<th scope="col">accion</th>
</tr>
</thead>
<tbody >
<tr v-for="(ProductCart, index) in carrito" :key="index.id">
<td>{{ProductCart.name}}</td>
<td>{{ProductCart.cantidad}}</td>
<td>{{ProductCart.precio}}</td>
<td>{{ProductCart.cantidad * ProductCart.precio}}</td>
<td>
<form action="" method="post">
<input :value="csrf" type="hidden" name="_token" >
<input type="hidden" name="id" id="id" value="<?php echo $producto['id'] ?>" >
<button name="btnAccion" value="Eliminar" class="btn btn-danger" type="submit"> Remove</button>
</form>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2"></th>
<td>
<h2>Total</h2>
</td>
<td align="right">
<h3> </h3>
</td>
</tr>
</tfoot>
</table>
so I receive the data
{1: {id: "1", name: "Motor 1", cantidad: "1", precio: "20.00"}}
1: {id: "1", name: "Motor 1", cantidad: "1", precio: "20.00"}
cantidad: "1"
id: "1"
name: "Motor 1"
precio: "20.00"
It seems like computed properties would work best in your case. I'm not sure how the data in carrito is structured, but assuming it looks something like this:
carrito: {
1: {
"id":"1",
"name":"Motor 1",
"cantidad":"1",
"precio":"20.00"
}
...
}
...you would have to loop through carrito, take the precio times the cantidad of each object, and add it to a running total. Here's an example:
total: function () {
let total = 0;
Object.values(this.carrito).forEach(
(item) => (total += item.precio * item.cantidad)
);
return total;
}
Object.values returns an array of just the values of carrito, which is then iterated through by .forEach, and its precios/cantidads are multiplied together, and then then added to the running total, and returned.
total would go in computed: {}, within your Vue instance. Computed properties are re-evaluated when dependant data changes, so total will be reevaluated whenever carrito changes. You can then place it wherever you want in the page, like a normal data property:
...
<tfoot>
<tr>
<th colspan="2"></th>
<td>
<h2>Total</h2>
</td>
<td align="right">
<h3>{{ total }}</h3>
</td>
</tr>
</tfoot>
...
Check out the demo here, (network fetching is simulated, so it takes two seconds to load carrito) and its code here.
More info on computed properties:
Computed Properties and Watchers: Vue Docs
Computed Properties: Vue Mastery
You could create a computed property or a method for your component. There you could loop all the items and add each price to a total variable. Then you return the total.
Have a look here: Vue computed properties
whats wrong why in blade don't want to show the LEVEL name
controller:
$streams=Stream::with('level')->get();
return view('streams.index',compact('streams'));
Stream Model:
public function level()
{
return $this->belongsTo('App\Models\Level', 'level_id');
}
Level Model:
public function stream()
{
return $this->hasMany('App\Models\Stream', 'level_id');
}
Blade Index:
#foreach($streams as $stream)
<tr>
<th scope="row">#</th>
<td>{{$stream->name}}</td>
<td>{{$stream->code}}</td>
<td>
{{$stream->level->name}}
</td>
<td>
<tr/>
#endforeach
Also tried:
#foreach($streams as $stream)
<tr>
<th scope="row">#</th>
<td>{{$stream->name}}</td>
<td>{{$stream->code}}</td>
#foreach($stream as $level)
<td>
{{$level->name}}
</td>
#endforeach
<td>
<tr/>
#endforeach
Error:
Trying to get property 'name' of non-object (View: C:\xampp\htdocs\project\sms\resources\views\streams\index.blade.php)
DD result:
[{"id":3,"name":"Class A","code":"GRC0001A","uuid":"X9HG9zc7ceTlhdfF1fN1wAer1cHP1MhfuM7GHBSqNogYSo3bsGmpTl06iJQyyKp3QMrkHe1VyiTxeKFa49wC7W5BY3E3kFZkpF1D","level_id":1,"created_at":"2020-06-14T10:58:28.000000Z","updated_at":"2020-06-14T11:39:54.000000Z","level":{"id":1,"name":"YEAR 7","code":"CODE1","uuid":"X9HG9zc7ceTlhdfF1fN1wAer1cHP1MhfuM7GHBSqNogYSo3bsGmpTl06iJQyyKp3QMrkHe1VyiTxeKFa49wC7W5BY3E3kFZkpF1D","created_at":"-000001-11-30T00:00:00.000000Z","updated_at":"-000001-11-30T00:00:00.000000Z"}},{"id":4,"name":"Class B","code":"GRC0001A","uuid":"gq2kZZikN76XEa4pQWsyAZBMxjKeHBJt0a840ZMSiuHGztuhYT0G6q5WcGgp8z6BD6nx0WSrrOTvEb4iQ0ewyB9Fa1M54CAv8HS2","level_id":null,"created_at":"2020-06-14T10:58:36.000000Z","updated_at":"2020-06-14T11:39:59.000000Z","level":null}]
Your first Blade template is almost correct.
The issue is that one or more of your records has no Level assigned (level_id=null), but you're still trying to pull the name property from $stream->level, which is null.
Simply add a check for $stream->level before trying to access/print its properties. For example:
#if($stream->level)
{{ $stream->level->name }}
#endif
or
{{ $stream->level ? $stream->level->name : 'No Level Attached' }}
or
{{ optional($stream->level)->name }}
etc.
Using VueJS with Vuetify and in Laravel framework. Many different methods of AJAX and defining components were tried but nothing worked. It seems that when the ajax call is made, the variable is updated, which I checked in the console.log, but it is not reflected in the DOM.
My current code is as follows
Method 1
In the home.blade.php
<div id="items-display-table">
#{{itemslist}}
<v-data-table
:items="itemslist"
class="elevation-1"
hide-actions
hide-headers
>
<template slot="items" slot-scope="props">
<td>#{{ props.item.name }}</td>
<td class="text-xs-right">#{{ props.item.calories }}</td>
<td class="text-xs-right">#{{ props.item.fat }}</td>
<td class="text-xs-right">#{{ props.item.carbs }}</td>
<td class="text-xs-right">#{{ props.item.protein }}</td>
<td class="text-xs-right">#{{ props.item.iron }}</td>
</template>
</v-data-table>
</div>
And in the app.js
var itemsDisplayTable = new Vue({
el: '#items-display-table',
data: {
itemslist: []
},
created: function () {
this.fetchData();
},
methods: {
fetchData: function () {
var self = this;
var apiURL = '/api/cards';
axios.get( apiURL )
.then ( function( response ) {
data = response['data'];
// console.log(data);
self.itemslist = data;
console.log(self._data);
});
}
}
});
Method 2
Alternatively, I have also tried building a component with the data passed as a prop to solve the reactive issue but still it doesn't work.
The code for that is as follows in home.blade.php
<div id="cards-display-table">
<grid
:itemslist="itemslist">
</grid>
</div>
In app.js
Vue.component('grid', require('./components/DataTable.vue'));
And the instance creation is same as above.
The code in the DataTable.vue file is as follows
<template>
<div>{{itemslist}}</div>
<v-data-table
:items="itemslist"
class="elevation-1"
hide-actions
hide-headers
>
<template slot="items" slot-scope="props">
<td>#{{ props.item.name }}</td>
<td class="text-xs-right">#{{ props.item.calories }}</td>\
<td class="text-xs-right">#{{ props.item.fat }}</td>\
<td class="text-xs-right">#{{ props.item.carbs }}</td>\
<td class="text-xs-right">#{{ props.item.protein }}</td>\
<td class="text-xs-right">#{{ props.item.iron }}</td>\
</template>
</v-data-table>
</template>
<script>
export default {
props: {
itemslist: Array
}
}
</script>
How should i proceed?
I found a solution to my question. It was a pretty silly mistake. So just in case, anyone faces it again, I have decided to answer it.
The problem was that I was registering a new root component to display the items in the app.js file. And it is clearly mentioned that for the Vuetify components to work, they must be wrapped in the <v-app>. So I put the components in a single file and now it is working perfectly.
just a very new to Vue 2.0, i actually use if for Laravel 5.4, now you can see from below link that i created one component which name is "canvas-chart", what actually i want show is a filterable table, and then to get more Json data from next steps, but now it always show me "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." , can not understand that i follow the official documentation to use it why it's not work?
new Vue({
el:'#filterTest',
data:{
keywords:[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}]
},
computed: {
filterM: function () {
var self = this
return self.filter(function (word) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
});
Vue.component('canvas-chat',{
template:'#canvasChart',
props:['keywordsData']
})
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<th v-for="key.id in keywordsData">
<span class="arrow" ></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="key.name in keywordsData">
<td v-for="key.phone in keywordsData"> {{key.name}}</td>
</tr>
</tbody>
</table>
</script>
<div id="filterTest">
<canvas-chat keywordsData="keywords" ></canvas-chat>
</div>
You have a few issues:
You must register the canvas-chat component first before you use it in the main component (put Vue.component('canvas-chat', ... before new Vue(...)).
Your v-for loops are wrong. They should be like v-for="key in keywordsData", not v-for="key.id in keywordsData".
The v-fors on the tr and td elements don't make sense; you will have to process the keywordsData first (perhaps in a computed property) to get it into the correct format you want, then loop over that.
You must bind the keywordsData prop in the template like this: :keywords-data="keywords".
I'm using VueJS 2.0 with Laravel 5.3. I have Vue array data (e.g, items). Now I want to render those data in table using v-for. In table, there is a button to redirect page to item details page. For that, I'm writing my static URL till / in href of tag. Then I'm appending {{item.id}}. But I'm getting this error.
Interpolation inside attributes has been removed. Use v-bind or the
colon shorthand instead. For example, instead of ,
use <div :id="val">
So I can't get that how to write data binding expression of VueJS in <a href="">. If anyone knows the solution, it will be appreciated.
Here is my code.
my-items.blade.php
<div id="app">
....
<tr v-for="item in items">
<td>
view
</td>
</tr>
....
</div>
my-items.js
new Vue({
el: '#app',
data: {
items: [
{id: 1},
{id: 2},
{id: 3}
]
},
})
EDIT
Here is what I was doing in AngularJS with Laravel 5.2. And I want similar like this.
view
It should be like following:
<tr v-for="item in items">
<td>
<a :href="'{{url('/item')}}/' + item.id" />
</td>
</tr>
If you wan't to maintain fixed URL rather than relative URL, you may consider this one:
<div id="app">
<tr v-for="item in items">
<td>
<a :href="'{{ url('/item') }}' + '/' + #{{ item.id }}" />
</td>
</tr>
</div>