how to render a table after an update delete or insert action here I have a table using the following code
<tbody>
<tr v-for="(item, index) in DATASKILL" :key="item.ID">
<td>{{ index + 1 }}</td>
<td>{{ item.skills }}</td>
<td>{{ item.profiency }}</td>
<td class="text-xs-center">
</tr>
</tbody>
export default {
data: function() {
return {
item: {
skills: "",
profiency: "",
idusers : parseInt(localStorage.getItem("userId")),
},
};
},
computed: {
DATASKILL() {
return this.$store.state.skill //call json using axios in store
},
},
methods:{
Submited() {
this.$store
.dispatch("createSkills", this.item)
.then((response) => {
// setTimeout(()=>{
// this.$store.dispatch('getSkill') // load response json use action get in store
// },2000)
})
.catch((error) => {
error;
});
},
}
when I insert data using the modal form, how do I make the table render without being refreshed?
Related
I'm having a slight issue here when i try to iterate through the data array from "history" ref
As we see here, there is 2 console log, 1 from the request and 1 after we put the data in history both show 2 array which is what the values should be but there is nothing on the table and yes every row have an unique id in the database
I'm still pretty new to vuejs ^^
Template
<template>
<div class="container">
<h3 v-if="loading"> Loading... </h3>
<table>
<tr>
<th>Title</th>
<th>Shares</th>
<th>Price</th>
</tr>
<tr ref="history" v-for="row in history" :key="row.id" >
<td>{{ row.title }}</td>
<td>{{ row.shares }}</td>
<td>{{ row.price }}</td>
</tr>
</table>
</div>
Script
<script>
import { store } from "../store"
import { onMounted, ref, reactive } from "vue"
import { supabase } from "#/supabase"
export default {
setup () {
const loading = ref(true);
const user = supabase.auth.user();
const history = ref([])
async function getHistory() {
try {
loading.value = true;
let { data, error, status } = await supabase
.from("history")
.select(`id, user_id, title, shares, price`)
.eq("user_id", user.id)
console.log(data)
if (error && status !== 406) throw error
if (data) {
history.value = data
console.log(history.value)
}
} catch (error) {
alert(error.message)
} finally {
loading.value = false
}
}
onMounted(() => {
getHistory()
})
return {
loading,
user,
history,
}
},
data() {
return {}
}
}
The issue is using ref="history" on the tr tag, as it will bind the ref with the DOM element, you need to remove it.
<tr v-for="row in history" :key="row.id" >
<td>{{ row.title }}</td>
<td>{{ row.shares }}</td>
<td>{{ row.price }}</td>
</tr>
I have some object in items array and in that objects, there is an array, I've filtered values of objects but the array that is located on it didn't filter I know its natural, but I don't know how can I map or filter the array, anyone can help me?
Here my vuex store codes:
const store = new Vuex.Store({
state: {
count: 0,
items: [
{ id: 1, name: "Jack", age: 19, favs: ["Football", "Game"] },
{ id: 2, name: "Tom", age: 20, favs: ["Basketball", "Swiming"] },
],
},
getters: {
filterItems(state) {
return state.items.filter((item) => item);
},
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
},
},
actions: {},
modules: {},
});
here html codes:
<table>
<thead>
<tr>
<th>Name:</th>
<th>Age:</th>
<th>Favs:</th>
</tr>
</thead>
<tbody v-for="(item, index) in filterItemsShow" :key="index">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.favs }}</td>
</tr>
</tbody>
</table>
and vuejs codes:
export default {
name: "App",
computed: {
filterItemsShow() {
return this.$store.getters.filterItems;
},
},
I found the solution, instead of this line code :
<td>{{ item.favs }}</td>
add below line code:
<td v-for="(i,index) in item.favs" :key="index">{{ i }}</td>
Instead of
<td>{{ item.favs }}</td>
use
<td>{{ filterFavs(item.favs) }}</td>
In methods
filterFavs(favs) {
let filteredFavs = favs.filter(fav => // filter with your criterias);
return filteredFavs.join(", ")
}
I've some problems with list rendering and filtering the data with computed properties
Instead of hardcoded row.age value, I'd like to use filterKey to filter row.age.
How to archieve this? I just don't get it.
Here's my example:
template:
<button type="button" class="btn btn-t1-secondary" v-on: click="filterKey = '15'">11</button>
<button type="button" class="btn btn-t1-secondary" v-on: click="filterKey = '30'">8</button>
<table>
<thead>
<tr>
<th>Category</th>
<th>Age</th>
<th>Food</th>
</tr>
</thead>
<tbody>
<tr v-for="row in filteredCategory">
<td>{{ row.category }}</td>
<td>{{ row.age }}</td>
<td>{{ row.food }}</td>
</tr>
</tbody>
</table>
JavaScript:
<script>
var app = new Vue({
el: '#app',
data: {
filterKey: '',
filterCategory: '',
dataToFilter: [
{
category: 'dog',
age: '11',
food: 'bone'
},
{
category: 'cat',
age: '8',
food: 'fish'
}
//etc.
]
},
computed: {
filteredCategory() {
return this.dataToFilter.filter(function (row) {
return row.category === 'dog'
})
.filter(function (row) {
console.log(this.filterKey)
return row.age === '15'
})
},
}
})
</script>
Solution
As #Sadraque_Santos suggested, I used arrow functions.
Code
filteredCategory() {
return this.dataToFilter.filter( r => r.category === 'dog' && r.age === this.filterKey);
}
Also, I have to support IE11 so I just use Babel to compile the code for me.
To have access to this inside a filter, map or another useful method you must learn about arrow functions, they allow you to create a function without the this bound to that object, so instead of using:
filteredCategory () {
return this.dataToFilter.filter(function (row) {
return row.category === 'dog'
})
.filter(function (row) {
console.log(this.filterKey)
return row.age === '15'
})
}
Your code should be like this:
filteredCategory () {
return this.dataToFilter
.filter((row) => row.category === this.filterCategory)
.filter((row) => row.age === this.filterKey)
}
I wrote such code:
<template>
<div class="home">
<HelloWorld tableTitle="Goods:">
<table class="table table-striped">
<tbody>
<tr v-for="(i, index) in items.data" :key="index">
<td>{{ i.id }}</td>
<td>{{ i.name }}</td>
<td>{{ i.producer }}</td>
<td><font-awesome-icon v-if="i.received" icon="check" /><font-awesome-icon v-else icon="times" /><td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import HelloWorld from "#/components/HelloWorld.vue";
import axios from "axios";
export default {
name: "home",
components: {
HelloWorld
},
data: () => ({
items: {},
errors: []
}),
beforeMount() {
axios
.get("http://40.115.119.247/AgileSelection/tnt/status")
.then(response => {
this.items = response.data;
console.log(this.items);
})
.catch(e => {
this.error.push(e);
});
}
};
<script>
Now, for refreshing information I just use the refresh button.
What and where should I add some lines of code to update information but without refreshing the page? Because, I am updating data every 5 seconds. So I think that manually updating is not so good idea.
do something like this
// data property
data () {
return {
...
interval: null
}
},
// in your created hook
created () {
this.interval = setInterval(this.refreshData, 5000)
},
beforeDestroy () {
clearInterval(this.interval)
},
// in methods property
methods: {
refreshData () {
// fetch data
axios.get("http://40.115.119.247/AgileSelection/tnt/status")
.then(response => {
this.items = response.data
})
}
}
this will fetch your data from your API and update the list automatically. this will update your UI as well.
you can try using location.reload() after the code where you register the update
for example
handleSubmit() {
this.registerServices(this.organization)
location.reload();
}
Can any one assist with why i cant get my array into the following please
HTML:
<table class="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Email</td>
<td>Password</td>
</tr>
</thead>
<tbody>
<tr v-if="email" v-for="mail in email" :key="">
<td>{{ allMyUsers.id }}</td>
<td>{{ allMyUsers.name }}</td>
<td>{{ allMyUsers.email }}</td>
<td></td>
</tr>
</tbody>
</table>
I'm calling my results as follows, i can see that the array is passed through my log (I think) but really strugging to understand my problem
Script:
import axios from 'axios';
export default {
computed: {
allMyUsers () {
return !this.$store.getters.alluser ? false : this.$store.getters.alluser
},
},
created () {
this.$store.dispatch('allUsers')
}
}
My code for getting the data is as follows and definately returns the data as I can see it in the log, just not sure if im passing it out
allUsers ({commit, state}) {
if (!state.idToken) {
return
}
globalAxios.get('/users.json')
.then(res => {
const data = res.data
const allUsers = []
for (let key in data) {
const user = data[key]
user.id = key
allUsers.push(user)
}
commit('storeUser', allUsers)
})
.catch(error => console.log(error))
}
My getter is as follows
getters: {
alluser (state) {
return state.allUsers
},
}
})
Any support very much appreciated as im new to vue so very much still learning
Many thanks for the help so far, I have tried to follow your guidance but nothing is returned and i now have no errors
my updated code is as follows, I was sure I d followed the guidance you kindly provided
HTML:
<tr v-if="myuser" v-for="myuser in allMyUsers" :key="">
<td>{{ myuser.email }}</td>
<td></td>
</tr>
SCRIPT:
<script>
import axios from 'axios';
export default {
computed: {
allMyUsers () {
return !this.$store.getters.myuser ? false : this.$store.getters.myuser
},
},
created () {
this.$store.dispatch('allMyUsers')
}
}
</script>
GETTER:
myuser (state) {
return state.myuser
},
Function:
allMyUsers ({commit, state}) {
if (!state.idToken) {
return
}
globalAxios.get('/users.json' + '?auth=' + state.idToken)
.then(res => {
const data = res.data
const myusers = []
for (let key in data) {
const myuser = data[key]
myuser.id = key
myusers.push(myuser)
}
commit('storemyuser', myusers)
})
.catch(error => console.log(error))
}
And finally my MUTATION:
storemyuser (state, myuser) {
state.myuser = myuser
},
Thankyou again for your assistance, you guys really are great at helping newbes like me learn
Your v-for loop is not good, email property is not defined in your component, you only defined a computed allUsers property (with getters from your store). It's this one you need to use :
<tr v-if="user" v-for="user in allUsers" :key="">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td></td>
</tr>