VueJS - One component but make requests to 2 different addresses - vue.js

I have a component MainTable that renders a table in which I display Tasks:
({title: String, body: String, etc.}).
This component also triggers created method hook to make a request to my API to http://localhost:3000/api/v1/tasks.
I want to have a button with a link (route) to all complete_tasks where I want to also render the same table (hence I made it a component) with all complete tasks.
This time however, I want this component to make a request to a different address to http://localhost:3000/api/v1/tasks/complete_tasks (to fetch all complete tasks).
Is it possible to achieve this?
//App.vue
<template>
<div class="container">
<div class="row">
<h2>Todos</h2>
<mainTable></mainTable>
</div>
</div>
</template>
<script>
import MainTable from './components/MainTable.vue'
export default {
components: {
'mainTable': MainTable
},
methods: {
}
}
</script>
//MainTable.vue
<template>
<table class="table table-sm table-striped">
<thead>
<tr>
<th>Title</th>
<th>Content</th>
<th colspan="3"></th>
<th><select-all-button></select-all-button></th>
<th><finishButton></finishButton></th>
<br>
<th><removeAllButton></removeAllButton></th>
</tr>
</thead>
<tbody>
<tr v-for="task in tasks">
<td>{{ task.title }}</td>
<td>{{ task.content }}</td>
<td>Show</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
</template>
<script>
import SelectAllButton from './buttons/SelectAll.vue';
import FinishButton from './buttons/FinishButton.vue';
import RemoveAllButton from './buttons/RemoveAllButton.vue';
export default {
components: {
'select-all-button': SelectAllButton,
'finishButton': FinishButton,
'removeAllButton': RemoveAllButton
},
data(){
return {
tasks: []
}
},
created(){
this.$http.get('tasks').then(function(data){
this.tasks = data.body.slice(0,20);
})
}
}
</script>

yes, of course, you can do it
you can make a method trigger on click
when you press the button make a request to your endpoint and get the data
and update your object tasks with new data
Is that clear?

Related

How can I iterate over array data and create new row for every new data in vue?

I have a stream data that I call through axios.get and the resposne.data is a json with one sensor's data like ,{"Temperature":"56"}, with this I use to create a row in vue template.The resposne.data is assigned to array but its not appending rows ,the data in table are getting changed.
This is the template part
<template>
<div class="container">
<h1>Tabular Data</h1>
<table class="table table-striped table-bordered" >
<thead>
<tr>
<th class="text-center">Time</th>
<th class="center">Device Parameter</th>
<th class="center">Magnitude</th>
<th class="right">Unit</th>
</tr>
</thead>
<tbody>
<tr v-for="data in Tabular" :key="data">
<td> {{new Date().toString()}} </td>
<td class="test-left">Temperature</td>
<td class="text-center"> {{data.toString()}} </td>
<td class="test-left">C</td>
</tr>
<!-- <td>{{data_alias.Humidity}}</td>
<td>{{data_alias.Pressure}}</td> -->
</tbody>
</table>
</div>
</template>
<script>
/* eslint-disable */
import axios from 'axios';
export default {
name: 'tabular',
data() {
return {
Tabular:[ ],
}
},
mounted() {
setInterval(()=>{
axios.get('http://localhost:3000/data')
.then((response)=>{
console.log(response.data);
this.Tabular=response.data;
})
.catch((error)=>{
console.log(error);
});
},2000);//I used set interval to get data from stream constantly
},
}
</script>
are you sure Tabular fill at one even?
I think no, because this.Tabular=response.data; ;
this.Tabular is undefined ;
try this
var that = this;
axios.get('http://localhost:3000/data')
.then((response)=>{
console.log(response.data);
that.Tabular=response.data;
})
.catch((error)=>{
console.log(error);
});
That is because you are replacing the content of this.Tabular. You should loop through your response data and, considering response.data is an array of rows, use
response.data.forEach((row) => { this.Tabular.push(row) })

How to remove ??? characters on database query result with Laravel

I am have an issue that sounds new and don't know what is happening. I am retrieving data from database with Laravel eloquent.
In my controller:
public function index()
{
$suppliers = Supplier::all();
return response()->json($suppliers);
}
Its working just fine, the problem is the result object however is appearing as shown below with leading ???. All query results in the entire project is rendering just this way. I have tried to trim the project witn trim() but I realize this wont work on object.
����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������[{"id":1,"first_name":"Ronald","last_name":"Wekesa","mobile_number":"0717245218","work_phone":"07140000","phone_code":254,"fax":null,"email":"email#yaho.com","postal_address":"P.o
Box
323","town":"Kitale","zip":30200,"phisical_address":"Kiminini","company":"Wafutech","created_at":"2018-03-05
11:52:30","updated_at":"2018-03-05
11:52:30"},{"id":2,"first_name":"Ronald","last_name":"Wekesa","mobile_number":"0725645544","work_phone":"070025400","phone_code":2....
when I render the result in my vuejs front end as shown below I am getting blank loop, I mean the loop runs but with empty bullet list. I am suspecting this might have something with this fun behavior.
//My View component
<template>
<div>
<h3>Suppliers</h3>
<div class="row">
<div class="col-md-10"></div>
<div class="col-md-2">
<router-link :to="{ name: 'create-supplier'}" class="btn btn-primary">Add Supplier</router-link>
</div>
</div><br />
<table class="table table-hover table-striped table-responsive">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Company</td>
<td>Mobile Phone</td>
</tr>
</thead>
<tbody>
<tr v-for="supplier in suppliers">
<td>{{ supplier.first_name }}</td>
<td>{{ supplier.last_name }}</td>
<td>{{ supplier.company }}</td>
<td>{{ supplier.mobile_number }}</td>
<td><router-link :to="{name: 'edit-supplier', params: { id: supplier.id }}" class="btn btn-primary">Edit</router-link></td>
<td><button class="btn btn-danger" v-on:click="deleteSupplier(supplier.id)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name:'displayAsset',
data(){
return{
suppliers: []
}
},
created: function()
{
this.fetchSuppliers();
},
methods: {
fetchSuppliers()
{
let uri = 'http://localhost/ims/public/api/suppliers';
this.axios.get(uri).then((response) => {
this.suppliers = response.data;
});
},
deleteSupplier(id)
{
let uri = `http://localhost/ims/public/api/suppliers/${id}`;
this.suppliers.splice(id, 1);
this.axios.delete(uri);
}
}
}
</script>
I have tried to re-install laravel but no difference. I have also re-installed my xampp server with the latest version but wan't lucky either. What is causing this and how can I resolve it. Thanks in advance.

vue.js does not correctly rerender compared to the vue instance object

I have a small issue with my vue template. The code is the following :
<template>
<div class="panel panel-default"
v-bind:id="'panel_'+noeud.id">
<div class="panel-heading">{{noeud.name}}</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Noeud</th>
<th>Poid</th>
</tr>
</thead>
<tbody>
<tr
v-for="noeud_poids in weightSorted"
v-if="noeud_poids.macro_zonning_noeud_id_2 != noeud.id"
is="macrozonningproximitenoeudpoids"
:noeud_poids="noeud_poids"
:noeud="noeud"
:noeuds="noeuds"
:delete_callback="delete_final"
:change_callback="update_line">
</tr>
<tr>
<td>
<select v-model="new_noeud">
<option value=""></option>
<option v-for="one_noeud in noeuds "
v-bind:value="one_noeud.id">{{one_noeud.name}}</option>
</select>
</td>
<td>
<input type="text" v-model="new_weight">
</td>
<td>
<input type="button" class="btn btn-primary" #click="addNoeudProximite" value="Ajouter"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
props: ['pnoeud', 'pnoeuds'],
data: function(){
return {
points: 0,
points_restants: 100,
new_weight:0,
new_noeud:0,
noeud:this.pnoeud,
noeuds:this.pnoeuds,
weightSorted:this.pnoeud.weightSorted
}
},
mounted() {
},
methods:{
delete_final(macro_zonning_noeud_id_2){
axios.delete("/macrozonning/proximite/",{
params:{
macro_zonning_noeud_id_2:macro_zonning_noeud_id_2,
macro_zonning_noeud_id_1:this.noeud.id
}
}).then((res) => {
Vue.delete(this.weightSorted, String(macro_zonning_noeud_id_2));
})
},
update_line(nb_points){
this.points_restants = this.points_restants - nb_points;
this.points = this.points + nb_points;
},
addNoeudProximite(){
axios.put('/macrozonning/proximite/', {
'macro_zonning_noeud_id_1': this.noeud.id,
'macro_zonning_noeud_id_2': this.new_noeud,
'weight': this.new_weight
}).then((res) => {
Vue.set(this.weightSorted, String(this.new_noeud), res.data);
});
}
}
}
</script>
When the function delete_final is executed on the last item of my list, the view is correctly rerendered as the last item of my list is removed. But when I try to remove the first item of my list then the view rerenders but the the last item has been removed. When I check the Vue object in devtools, it does not reflect the new view, but it reflects the action taken (my first item has been removed).
If you have any idea where this problem comes from it would be awesome.
Thanks a lot community
Use a key attribute on the element you are rendering with v-for so that vue can exactly identify VNodes when diffing the new list of nodes against the old list. See key attribute
<tr> v-for="noeud_poids in weightSorted" :key="noeud_poids.id" </tr>

Child component not updating when data chaining - why does :key need to be the value that changes?

I had a table row that was like this:
<tr v-for="(pricing, idx) in pricings"">
<td>{{pricing.description}}</td>
<td>$ {{pricing.unconfirmed_price_formatted}}
</tr>
I wanted to migrate this table row to a component. However, when I change the underlying data (this.pricings), the child component doesn't update. I am calling it like this:
<pricing-row v-for="(pricing, idx) in pricings" :key="pricing.id + pricing.description" :pricing=pricing v-on:updateAfterSave="savedData" v-on:showModal="showAddEditModal"></pricing-row>
The strange thing is that the underlying array is changing - just this component is not properly updating.
It's also clear that if we use as a key the value that changes (unconfirmed_price_formatted in this case), it does update.
I'm a bit baffled by this behavior. Any ideas on what is wrong?
edit 1
here is the component:
<template>
<tr>
<td>{{localPricing.description}}</td>
<td v-if="localPricing.price">$ {{localPricing.price_formatted}} {{localPricing.units_display}}</td>
<td v-else> </td>
<td v-if="localPricing.unconfirmed_price">$ {{localPricing.unconfirmed_price_formatted}} {{localPricing.unconfirmed_units_display}}</td>
<td v-else> </td>
<td v-if="localPricing.state != 'deleted'">
<!-- button class="btn btn-outline-secondary" #click="willShowModalWithBattery(pricing)">edit</button -->
<button class="btn btn-outline-secondary" #click="showModal(pricing)">edit</button>
</td>
<td v-else> </td>
</tr>
</template>
<script>
export default {
props: ['pricing'],
data: function(){
return {
localPricing: this.pricing
}
},
methods:{
showModal: function(pricing){
this.$emit('showModal', pricing);
}
}
}
</script>

How to get a table row click event to work using Aurelia that then navigates to another page

I want to create a Master/Detail page with table being the master that you click on a row and then it navigates to a detail page
Take the Aurelia ContactManager example and replace the list with a table
List example:
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4 class="list-group-item-heading">${contact.firstName} ${contact.lastName}</h4>
<p class="list-group-item-text">${contact.email}</p>
</a>
</li>
Table example:
<table class="table" if.bind="contacts" id="myTable">
<thead>
<tr>
<th>IDs</th>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr repeat.for="contact of contacts" class="clickable-row ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<td>${contact.id}</td>
<td>${contact.name}</td>
</tr>
</tbody>
</table>
I know how to get the row onlick to work using jquery without Aurelia as in
$(".class='clickable-row").click(function() {
window.location = $(this).data("href");
});
but I do not know how to use aurelia navigation with the row click.
The solution does not necessarily need to use jquery onlcick just whatever is appropriate for the Master/Detail scenario with Aurelia
If you wanted to capture click on <tr> specifically
<tr repeat.for="contact of contacts" click.delegate="onSelectContact($event, contact)">
<td style="cursor: pointer;">lalala</td>
</tr>
and in your view-model, something like..
import { autoinject } from 'aurelia-framework'
import { Router } from 'aurelia-router'
import { Contact } from '../la/la'
#autoinject
export class Contacts {
contacts: Array<Contact> = []
constructor(private router: Router) {
}
onSelectContact (event: UIEvent, contact: Contact) {
...... // do whatever
this.router.navigateToRoute('contact', {id: contact.id})
}
...
}
however, this requires your router config to contain a
{ route: 'contact/:id', name: 'contact', moduleId: PLATFORM.moduleName('path to module'), title: 'Contact' }