As an inline template vue was rendering the expected table on the page. I've now moved it into its own component and nothing is being displayed in the browser. I can see the data in the vue console and there are no errors in chrome console but alas no content...
in view
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Created At</th>
<th>Created By</th>
<th style="text-align: center">Edit</th>
<th style="text-align: center">Delete</th>
</tr>
</thead>
<permissions :data="{{ $permissions }}"></permissions>
</table>
permissions.vue file ...
<template>
<tbody>
<tr v-for="permission in items">
<td>{{ items.name }}</td>
</tr>
</tbody>
</template>
<script>
export default {
props: ['data'],
data() {
return {
items: this.data
}
}
}
</script>
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('flash', require('./components/Flash.vue'));
Vue.component('user', require('./components/User.vue'));
Vue.component('permissions', require('./components/Permissions.vue'));
const app = new Vue({
el: '#app'
});
Again no browser errors and no compile errors.
Assistance always appreciated!
Kevin
Well your template isn't showing anything here
// This
<tr v-for="permission in items">
<td>{{ items.name }}</td>
</tr>
// Should be this
<tr v-for="permission in items">
<td>{{ permission.name }}</td>
</tr>
See the difference here in the variable name in your <td> element ;)
@bobbybouwmann man you're a lifesaver, that works. However I had to pull the entire <table> into the vue template which I thought was odd. Before I did that it would render the <tr> outside of the table entirely.
anyway, that got me up and running... directly into my next brick wall. In this table I have a @click so that I can delete a row and its data.
like so...
<td style="text-align: center"><a href="#" id="sa-warning"><i
class="ti-close text-danger" @click="destroy(permission.id, index)"></i></a></td>
then a destroy method...
methods: {
destroy(id, index) {
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function () {
swal({
title: "Deleted!",
type: "success"
}, function () {
//axios.delete('/admin/permissions/' + id);
alert(id + '' + index)
items.slice(index, 1)
});
});
}
}
the alert() returns the correct id, and index but how can I now remove that item from the data so that it is no longer visible on the page without doing a post back?
I have tried
items.slice this.items.slice permission.slice this.slice(index,1)
all give the error Uncaught ReferenceError: '...' is not defined
Again thank you tremendously!
Aah great I could help!
Anyway if you want to delete an item from your "data" array you need use the this keyword. The this keyword points to the data array in your component.
this.items.slice(index, 1)
This should do it ;)
@bobbybouwmann I've tried that one and all I get is Uncaught TypeError: Cannot read property 'slice' of undefined :(
So, after much trial an error this works... sort of.
methods: {
del(index) {
swal({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function () {
swal({
title: "Deleted!",
type: "success"
}, function () {
//axios.delete('/admin/permissions/' + id);
});
});
this.items.splice(index, 1);
}
}
It was all in where I referred to this and the correct method apparently is splice(). While this does remove the item from the data its fires in the wrong place. Was hoping to have it fire after the axios delete, but at that point in the function this."anything" is undefined. May have to resort to a less complex confirmation method.
Aah I get what you mean! In this case you can't use this because the callback got it's own context. You can get around this by doing something like this
del(index) {
let that = this;
swal({
title: "Are you sure?",
}, function () {
swal({
title: "Deleted!",
type: "success"
}, function () {
// axios.delete('/admin/permissions/' + id);
this.items.splice(index, 1);
});
});
},
That did it! @bobbybouwmann thank you so much! I owe you big time :)
I did update this.items.splice(index, 1); to that.items.splice(index, 1); and once I did it worked as desired.
Huge thanks!
Yea of course! Typo on my side! Anyway the context was the problem here :)
Glad I could help
Please or to participate in this conversation.