MattB

MattB

Member Since 9 Months Ago

Experience Points
4,530
Total
Experience

470 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
2
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
4,530 XP
Dec
06
1 month ago
Activity icon

Replied to How To Return Update Result As Json Object

Ok yeah it seems it's not being updated. I can see the form data is passing over all the relevant info from the front end, so is something wrong in the code? Is it failing because maybe it's not picking up there being an image do you think?

Activity icon

Started a new Conversation How To Return Update Result As Json Object

I have the following which is just an update to a db that takes in a Json object from vue. I cannot figure out how to return the result as a json object back to vue. What have I done wrong? As it stands, I get no response showing when I check in the developer tools of Chrome:

public function update(Request $request, $id)
    {
        $imageSearch = Gallery::findOrFail($id);
        $file_image = $request->file('imageFile');
        $file_thumbnail = $request->file('thumbnailFile');
        $input = $request->all();
        if($file_image && $file_thumbnail){
            $fileName = $file_image->getClientOriginalName();
            $thumbName = $file_thumbnail->getClientOriginalName();
            $path_images = 'images';
            $path_thumbnail = 'thumbnails';
            if($file_image->move($path_images, $fileName) && $file_thumbnail->move($path_thumbnail, $thumbName)){
                $input['image'] = '/' . $fileName;
                $input['thumbnail'] = '/' . $thumbName;
                $input['name'] = $request->name;
                $input['species_id'] = $request->species;
                $input['tag'] = $request->tag;
                $input['patreon'] = $request->patreon;
                $update = $imageSearch->update($input);
                return response()->json([
                    'update' => $update,
                    'message' => 'Image has been Updated'
                ]);
            };
        };

    }
Dec
04
1 month ago
Activity icon

Replied to 404 Error When Uploading File With Axios. Please Help

I know it works because I can see it displaying images I already had in the database. Can I not append it as an object then? I ask as I need to grab the image to move it to a folder and the name too. Unless I'm going about it the wrong way? How is it done with Vue?

Activity icon

Replied to 404 Error When Uploading File With Axios. Please Help

Yeah, the writing to the db would come after once I can write to the controller. I have this right now which is displaying the images using props and it seems to work but is this what's throwing off the code?

<template #item.image="{item}">
            <img width="100" :src="('../../../thumbnails'+item.image)">
 </template>
Activity icon

Replied to 404 Error When Uploading File With Axios. Please Help

So the form is there to upload an image alongside information about the image, such as title etc. It has some text inputs and an image input all with the intent to pass it across to the database via the api

Activity icon

Replied to 404 Error When Uploading File With Axios. Please Help

Sorry to be dumb here, just getting into Vuejs properly, but if I want to pass the whole form over including the image, how would I do that?

Activity icon

Replied to 404 Error When Uploading File With Axios. Please Help

No doesn't that grab just the image? I need all the form submitting. I get this error when I try adding the .image part app.js:43380 [Vue warn]: Invalid prop: type check failed for prop "item". Expected Object, got File

Activity icon

Started a new Conversation 404 Error When Uploading File With Axios. Please Help

I have a form with input for 2 images, one which goes to an images folder and one which goes to thumbnails. When I hit upload, I get GET http://danza.test/thumbnails[object%20File] 404 (Not Found). If I output the request object, all looks ok. I'm stuck.

Upload method:

let $updatedGallery = this;
                    let $index = this.images.push(this.editedItem)-1;
                    axios.post('/api/gallery', this.editedItem).then((response) => {
                        $updatedGallery.editedItem.id = response.data.id;
                        Object.assign($updatedGallery.images[$index], $updatedGallery.editedItem);
                    })
                        .catch(function (error) {
                            console.log(error);
                        });

Object:

editedItem: {
                name: '',
                image: null,
                thumbnail: null,
                species: '',
                tag: '',
                patreon: '',
                action: '',
            },
            defaultItem: {
                name: '',
                image: null,
                thumbnail: null,
                species: '',
                tag: '',
                patreon: '',
                action: '',
            },

Form:

<v-row>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-file-input v-model="editedItem.image" label="Picture"></v-file-input>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-file-input v-model="editedItem.thumbnail" label="Thumbnail"></v-file-input>
                                    </v-col>
Dec
03
1 month ago
Activity icon

Started a new Conversation Vue Image Upload Issue

I'm using vuetifiy's file upload input to handle file uploads. My form is this:

<v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-text-field label="Image Title" v-model="editedItem.name" single-line></v-text-field>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-select :items="species" v-model="editedItem.species" label="Species"></v-select>
                                    </v-col>
                                </v-row>
                                <v-row>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-file-input v-model="editedItem.image" label="Picture"></v-file-input>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-file-input v-model="editedItem.thumbnail" label="Thumbnail"></v-file-input>
                                    </v-col>
                                </v-row>                              
                            </v-container>
                        </v-card-text>

Every field except the 2 file upload links works fine. In the console, I get errors such as this:

TypeError: Cannot read property 'files' of undefined

and others saying the file is undefined. Have I done something wrong with the v-model part? The edited item is as such:

 editedItem: {
                name: '',
                image: '',
                thumbnail: '',
                species: '',                
                action: '',
            },
Dec
02
1 month ago
Activity icon

Replied to Issue Editing Items In Vue Table

Also forgot to add, when I use the above code to enter a new item, in the error console I get this error just after it outputs 'Before' (put there by the above code in the component):

TypeError: Cannot set property 'id' of undefined
    at VM8713 app.js:2159
Activity icon

Started a new Conversation Issue Editing Items In Vue Table

I have a table with the ability to add new items and edit existing ones (with the edit button being next to each entry). I have an issue with it whereby if you were to add a new item, NOT refresh the page, but then go to edit the item, it will edit it on Vue but not pass the edit back to the database. When you go to edit an item, the PUT URL returns a 404 error. If however, you refresh the page after adding an item, you can edit it perfectly fine. Any ideas what I've done wrong, or maybe forgotten to add?

Component:

<template>
    <v-data-table
        :headers="headers"
        :items="questions"
        sort-by="question"
        class="elevation-1"
    >
        <template v-slot:top>
            <v-toolbar flat color="white">
                <v-toolbar-title>FAQs</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-dialog v-model="dialog" max-width="700px">
                    <template v-slot:activator="{ on }">
                        <v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn>
                    </template>
                    <v-card>
                        <v-card-title>
                            <span class="headline">{{ formTitle }}</span>
                        </v-card-title>

                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-textarea v-model="editedItem.question" label="Question"></v-textarea>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-textarea v-model="editedItem.answer" label="Answer"></v-textarea>
                                    </v-col>
                                </v-row>
                            </v-container>
                        </v-card-text>

                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
                            <v-btn color="blue darken-1" text @click="saveToServer">Save</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-toolbar>
        </template>
        <template v-slot:item.action="{ item }">
            <v-icon
                small
                class="mr-2"
                @click="editItem(item)"
            >
                mdi-square-edit-outline
            </v-icon>
            <v-icon
                small
                @click="deleteItem(item)"
            >
                mdi-delete
            </v-icon>
        </template>
        <template v-slot:no-data>
            <v-btn color="primary" @click="initialize">Reset</v-btn>
        </template>
    </v-data-table>
</template>

<script>
    export default {
        data: () => ({
            dialog: false,
            headers: [
                {
                    text: 'Question',
                    align: 'left',
                    sortable: true,
                    value: 'question',
                    width: '25%'
                },
                { text: 'Answer', value: 'answer', width: '55%' },
                { text: 'Actions', value: 'action', sortable: false, width: '20%' },
            ],
            questions: [],
            editedIndex: -1,
            editedItem: {
                question: '',
                answer: ''
            },
            defaultItem: {
                question: '',
                answer: ''
            },
        }),

        computed: {
            formTitle () {
                return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
            },
        },

        watch: {
            dialog (val) {
                val || this.close()
            },
        },

        created () {
            this.initialize();
            this.loadUsers();
        },

        methods: {
            initialize () {
                this.questions = []
            },
            loadUsers(){
                if (axios == null) {
                    return;
                }
                axios.get('/api/faq').then(res=>{
                    if(res.status === 200){
                        this.questions=res.data;
                    }
                }).catch(err=>{
                    console.log(err);
                });
            },

            editItem (item) {
                this.editedIndex = this.questions.indexOf(item);
                this.editedItem = Object.assign({}, item);
                this.dialog = true
            },

            deleteItem (item) {
                const index = this.questions.indexOf(item);
                confirm('Are you sure you want to delete this item?') && this.questions.splice(index, 1)
            },

            close () {
                this.dialog = false;
                setTimeout(() => {
                    this.editedItem = Object.assign({}, this.defaultItem);
                    this.editedIndex = -1
                }, 300)
            },

            saveToServer () {
                if (this.editedIndex > -1) {
                    // Edit item
                    Object.assign(this.questions[this.editedIndex], this.editedItem);
                    axios.put('/api/faq/' + this.questions[this.editedIndex].id, this.editedItem).then(function (response) {
                        console.log(response);
                    })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else {
                    //New item
                    this.questions.push(this.editedItem);
                    axios.post('/api/faq', this.editedItem).then(function (response) {
                        console.log('Before');
                        this.id = response.id;
                        console.log('After');
                        Object.assign(this.questions[this.editedIndex], this);
                        console.log(response);
                    })
                        .catch(function (error) {
                            console.log(error);
                        });
                }

                this.close()
            },
        },
    }
</script>

Store controller:

public function store(Request $request)
    {
        $bodyContent = $request->getContent();
        Storage::disk('local')->put('APIdump.txt', $bodyContent);
        $id = faq::insertGetId($request->all());
        return Response:: json([
            'status' => 'ok',
            'id' => $id,
        ], 200);
    }

Update controller:

public function update(Request $request, $id)
    {
        faq::findOrFail($id)->update($request->all());
        return response(['message' => 'Success']);

    }
Nov
29
1 month ago
Activity icon

Replied to How To Cross Reference Tables

How would I reference that in my VueJS model please?

Activity icon

Started a new Conversation How To Cross Reference Tables

I know that in Laravel I can reference the "name " column of one table using the key from another, but how does one do that in Vue? I'm using the below table layout from Vuetify but can't see how to get the role name from the Roles table using the Role_id from the users table:

<template>
    <div>
        <v-toolbar flat color="white">
            <v-toolbar-title>Users</v-toolbar-title>
        </v-toolbar>
        <v-data-table
            :headers="headers"
            :items="users"
            :items-per-page="5"
            class="elevation-1"
            flat
        >
        </v-data-table>
    </div>
</template>

<script defer>
    export default {
        data () {
            return {
                headers: [
                    {
                        text: 'Username',
                        align: 'left',
                        value: 'username',
                    },
                    { text: 'Email', value: 'email' },
                    { text: 'Role', value: 'role_id' },

                ],
                users: [],
            }
        },
        created() {
            this.loadUsers();
        },
        methods: {
            loadUsers(){
                if (axios == null) {
                    return;
                }
                axios.get('/api/user').then(res=>{
                    if(res.status === 200){
                        this.users=res.data.users;
                    }
                }).catch(err=>{
                    console.log(err);
                });
            }
        }
    }
</script>

Controller:

public function index()
    {
        $allUsers = User::all();
        $allRoles = Role::all();
        return Response::json([
            'users' => $allUsers,
            'roles' => $allRoles
        ], 200);
    }

Many thanks

Nov
28
2 months ago
Activity icon

Replied to How To Send Data From Laravel Controller To Vuejs

Yep everything mentioned there is all in my files

Activity icon

Replied to How To Send Data From Laravel Controller To Vuejs

Ok I tried something different slightly. I don't think axios is being loaded at all. Check:

methods: {
            loadUsers(){
                if (axios == null) {
                    console.log(('NULL RESULT'));
                    return;
                }
                axios.get('https://jsonplaceholder.typicode.com/api/user').then(res=>{
                    if(res.status === 200){
                        console.log('working');
                        this.users=res.data;
                    }
                    console.log('something');
                }).catch(err=>{
                    console.log('error');
                    console.log(err);
                });
            }
        }

axios is null as the result of console.log(('NULL RESULT')); is being shown in the console, hinting axios isn't even being loaded

Activity icon

Replied to How To Send Data From Laravel Controller To Vuejs

The url in api.php is

Route::get('user', '[email protected]');

Sorry if I misunderstood but how is the api.php involved when I am getting the data from an outside source?

Activity icon

Replied to How To Send Data From Laravel Controller To Vuejs

I don't think it is a path problem as when I try to get the data from here it doesn't work either:

https://jsonplaceholder.typicode.com/users

Activity icon

Replied to How To Send Data From Laravel Controller To Vuejs

No joy I'm afraid, still no data

Activity icon

Started a new Conversation How To Send Data From Laravel Controller To Vuejs

How do I send data from Laravel Controller to vue? I have it set up how I thought it might work but no data is being sent. What have I done wrong?

Controller(set in a separate API folder):

public function index()
    {
        return User::all();
    }

Route from api.php:

Route::apiResources([
    'user' => 'API\UsersController'
]);

Component code:

<template>
    <div>
        <v-toolbar flat color="white">
            <v-toolbar-title>Users</v-toolbar-title>
        </v-toolbar>
        <ol v-for="user in users">
            <li>Name: {{ user.name }}</li>
        </ol>
        <v-data-table
            :headers="headers"
            :items="users"
            :items-per-page="5"
            class="elevation-1"
            flat
        >
        </v-data-table>
    </div>
</template>

<script>
    import {AxiosInstance as axios} from "axios";

    export default {
        data () {
            return {
                headers: [
                    {
                        text: 'Username',
                        align: 'left',
                        value: 'username',
                    },
                    { text: 'Name', value: 'name' },
                    { text: 'Surname', value: 'surname' },
                    { text: 'Email', value: 'email' },

                ],
                users: [],
            }
        },
        methods: {
            loadUsers(){
                axios.get('./api/user').then(response => this.users = response.data);
            }
        },
        mounted() {
            this.loadUsers();
        }
    }
</script>

I just put a simple list up there to test the array but it just comes out blank.

Activity icon

Replied to How To Use Vue Router Instead Of Laravel Routing Just For Certain Urls

I found the issue. In my URLs I was appending /pagehere at the end of dashboard.test/. Fixed by appending /admin/pagehere instead. Is this the 'correct' solution or is there supposed to be a more elegant way?

Activity icon

Replied to How To Use Vue Router Instead Of Laravel Routing Just For Certain Urls

I don't think I did describe it wrong. What I mean is I want Laravel routing to handle just the front end customer-facing pages and I wanted Vue router to just handle the back admin page that the users see. That solution you posted just seems to make Vue router handle all the routing by the looks

Activity icon

Replied to How To Use Vue Router Instead Of Laravel Routing Just For Certain Urls

Yeah the address shows fine in the bottom left, and I'm using my own middleware

Activity icon

Replied to How To Use Vue Router Instead Of Laravel Routing Just For Certain Urls

Hmm that doesn't seem to be working quite right for me. I can get to the admin dashboard main page which is dashboard.test/admin just fine but when I click one of the links in there it changes the URL to dashboard.test/users (for example) and when you hit refresh it 404s again

Activity icon

Started a new Conversation How To Use Vue Router Instead Of Laravel Routing Just For Certain Urls

I don't know if this is possible as my knowledge of Vue isn't that strong just yet. Is there a way to have the front (customer-facing) part of a website coded in Laravel with Laravel routing but have the back coded in Vue with Vue routing? I have Vue there now with Vue router, but when you click one of the links it updates the URL as expected and goes to the right page, but when you hit refresh, Laravel (I think) tries to look for the URL but then 404s.

How do I tell that specific part of the site to let Vue router deal with the routing and not Laravel?

Nov
27
2 months ago
Activity icon

Started a new Conversation Issue With Vuetify Not Working With Laravel

I have Vuetify installed in my Laravel project but none of the v- classes are working. There are no errors in the console though. Here is the app.js file:

require('./bootstrap');

window.Vue = require('vue');

import Vuetify from 'vuetify'

Vue.use(Vuetify);

Vue.component('container-component', require('./components/ContainerComponent.vue').default);
Vue.component('index-component', require('./components/IndexComponent.vue').default);

const vuetify = new Vuetify();

const app = new Vue({
    el: '#app',
    vuetify
});

and an example component which vuetify isn't being applied to:

<template>
    <v-btn>BUTTON</v-btn>
</template>

<script>
    export default {
        name: "IndexComponent"
    }
</script>

<style scoped>

</style>

I just was using a single button to test if it was working.

Nov
26
2 months ago
Activity icon

Replied to Question On How Vue And Laravel Work Together

Yeah I think I miscommunicated when I was talking about the back end. I suppose my question should have been: Is a db such as firebase or the like enough for a project to run on or will there be a point where it's outgrown and need something like an sql back end to store data?

Activity icon

Started a new Conversation Question On How Vue And Laravel Work Together

So, just trying to get my head around Vue and how it works with Laravel. More to the point, what tasks should Vue do and what should Laravel do? Was wondering about the following:

  1. Which should handle user authentication?
  2. Which should handle page routing?
  3. Which should handle the sorting of data from the db? Should Laravel do the specific query and send the result to Vue or just send the whole lot and let Vue handle the queries?
  4. Does Vue always need an SQL back end for production deployments, or do some prod apps use a none SQL db like firebase or something like that for data storage?

I can imagine those questions are going to be largely scenario dependant but I was just wondering if those questions have a 'generic' answer?

Nov
25
2 months ago
Activity icon

Replied to How To Do Real Time Updates On Delete

Anyone have any ideas please?

Activity icon

Replied to How To Do Real Time Updates On Delete

I know there's an onSnapshot I can run but am unsure how to run the delete when I use it. For example, I have gotten as far as:

nDelete(id) {
                db.collection('project').doc(id).onSnapshot(snapshot => {
                    const changes = snapshot.docChanges();
                    changes.forEach (change => {
                        if(change.type === 'removed') {
                            this.projects.querySelector('[data-id=' + change.doc.id + ']')
                        }
                    })
                })
            }

But when I come to run it it says docChanges() is not a function

Activity icon

Started a new Conversation How To Do Real Time Updates On Delete

I have the following which works fine to delete from firebase, however, it doesn't reflect on the front end that the item was deleted until you refresh the page. How would I set it so that it also removes from the front end without having to manually hit refresh? Same question for editing too

<template>
    <v-dialog max-width="600px" v-model="dialog">
        <template v-slot:activator="{ on }">
            <v-icon class="pr-1" v-on="on">mdi-square-edit-outline</v-icon>
        </template>
        <v-card>
            <v-card-title>
                <h2 class="font-weight-light">Edit Project <v-btn class="red darken-4 white--text" @click="onDelete(projectId)">Delete</v-btn></h2>
            </v-card-title>
            <v-card-text>
                <v-form>
                    <v-row>
                        <v-col>
                            <v-text-field label="Title" v-model="title"></v-text-field>
                        </v-col>
                        <v-col>
                            <v-text-field label="Client" v-model="client"></v-text-field>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="6">
                            <h3>Add Milestone</h3>
                            <v-text-field label="Milestone" v-model="name"></v-text-field>
                            <v-btn @click="addMilestone">Add</v-btn>
                        </v-col>
                        <v-col cols="6">
                            <h3>Milestones</h3>
                            <v-list dense="dense">
                                <v-list-item v-for="mile in milestone" :key="mile.id">
                                    <v-list-item-content>
                                       {{ mile.id }}.{{ mile.text }}
                                    </v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </v-col>
                    </v-row>
                    <v-spacer></v-spacer>
                    <v-row>
                        <v-spacer></v-spacer>
                        <v-col class="6">
                            <v-btn @click="editProject(projectId)">Confirm Changes</v-btn>
                        </v-col>
                    </v-row>
                </v-form>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>

<script>
    import db from '@/fb.js'
    export default {
        data(){
            return {
                milestone: [],
                name: null,
                id: 1
            }
        },
        props: {
            projectId: String,
            title: String,
            client: String
        },
        methods: {
            addMilestone() {
                this.milestone.push({
                    text: this.name,
                    id: this.id++
                });
            },
            editProject(id) {
                db.collection('project').doc(id).update({
                    title: this.title,
                    client: this.client
                }).then(() => {
                    this.dialog = false;
                });
            },
            onDelete(id) {
                db.collection('project').doc(id).delete()
            }

        }
    }
</script>

<style scoped>

</style>
Nov
22
2 months ago
Activity icon

Replied to Function Help With Vue Please

This doesn't help as when if change the v-model and array name, the method is complaining there are undefined properties or methods

Activity icon

Started a new Conversation Function Help With Vue Please

I'm just trying to get a simple dynamic list sorted for part of a project I'm working on but for some reason, it's telling me

TypeError: this.milestone.push is not a function

I've probably made a schoolboy error but I can't see what...could you please help?

<template>
    <v-dialog max-width="600px">
        <template v-slot:activator="{ on }">
            <v-icon class="pr-1" v-on="on">mdi-square-edit-outline</v-icon>
        </template>
        <v-card>
            <v-card-title>
                <h2 class="font-weight-light">Edit Project <v-btn class="red darken-4 white--text">Delete</v-btn></h2>
            </v-card-title>
            <v-card-text>
                <v-form>

                    <v-row>
                        <v-col cols="6">
                            <h3>Add Milestone</h3>
                            <v-text-field label="Milestone" v-model="milestone"></v-text-field>
                            <v-btn @click="addMilestone">Add</v-btn>
                        </v-col>
                        <v-col cols="6">
                            <h3>Milestones</h3>
                            <v-list>
                                <v-list-item v-for="mile in milestone" :key="mile.text">
                                    <v-list-item-content>
                                        {{ mile.text }}
                                    </v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </v-col>
                    </v-row>

                </v-form>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        data(){
           return {
               milestone: [
                   {text: ''}
               ]
           }
        },
        methods: {
            addMilestone() {
                this.milestone.push({
                    text: this.milestone
                });
            }
        }
    }
</script>
Nov
21
2 months ago
Activity icon

Started a new Conversation How To Add Static Component To End Of Dynamic List

I'm looking for a way to have a static component on its own at the end of a dynamically created list which will eventually have an add new project functionality on it. I have the below so far but I think I've messed it up as the static component isn't showing. Any help would be great as I'm new to using Vue:

<template>
    <v-row class="px-5">
        <v-col cols="6" xs="6" md="3" v-for="project in projects" :key="project.title">
            <div v-if="index !== last">
                <app-project :title="project.title" :progress="project.progress" :client="project.client" :taskList="project.tasks" :completed="completed"></app-project>
            </div>
            <div v-else>
                <v-card cols="6" xs="6" md="3" class="v-card--shaped pl-4 pb-1">
                    Test text goes here
                </v-card>
            </div>
        </v-col>
    </v-row>
</template>
Activity icon

Started a new Conversation Created Lifecycle Hook Issue

I have an odd issue, and I don't know if it's an IDE or typo thing? I have the following code, but my IDE is saying the created function is unused and the data isn't loaded from firebase. If I were to type in another created lifecycle hook above it, it doesn't show unused any more, but obviously it complains it's duplicated. What have I done wrong, please?

    import db from '@/fb'
    import project from './project.vue'
    export default {
        data(){
            return {
                projects: []
            }
        },
        methods: {
          completed(tasks){
              let done = 0;
              for (const task of tasks)
              {
                  if(task.complete === true){
                      done ++;
                  }
              }
              return done;
          }
        },
        created(){
            db.collection('projects').onSnapshot(res => {
                const changes = res.docChanges();
                changes.forEach(change => {
                    if(change.type === 'added'){
                        this.projects.push({
                            ...change.doc.data(),
                            id: change.doc.id
                        })
                    }
                })
            })
        },
        components: {
            appProject: project
        }
    }
Oct
23
3 months ago
Activity icon

Replied to URL Appended To Website URL But It's Not Wanted There

I get the link exactly as it's written in the db. If it's www.google.com in the db, the DD shows www.google.com exactly

Activity icon

Replied to URL Appended To Website URL But It's Not Wanted There

Yes I know, that's what I have done. Accessing them isn't the problem

Activity icon

Replied to URL Appended To Website URL But It's Not Wanted There

They're just ones like: www.google.com www.bbc.co.uk etc

Even ones like http://consolepassion do the same thing too

Activity icon

Started a new Conversation URL Appended To Website URL But It's Not Wanted There

Sorry, don't know how to explain the title better...I have the below line of code which grabs a URL from my database. When it shows on the site, it appends the url to be after the websites URL, ie it will go to www.sitename.com/website_from_db rather than www.webstite_from_db. How can I stop this, bearing in mind, the site in the database can be pasted in with http/https or just www. site name?

<div class="col-4"><a href={{ url($links->url) }} target="_blank">{{ $links->link_text }}</a><br>{{ $links->description }}</div>
Oct
22
3 months ago
Activity icon

Started a new Conversation Mailchimp Not Loading On All Pages

So, I have mailchimp working my laravel app, however its hit an miss when it shows. This is the header section from my layout blade file. Some pages that use this layout file will show the pop up but others don't:

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/a1d5b8ba711ecece58be5de11/1b204ce2d3c6f7dbe2d773358.js");</script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link href="https://fonts.googleapis.com/css?family=Iceland|Nunito|Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="icon" href="/images/pacmanfav.png" type="image/x-icon"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>RetroWorld</title>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=5d495cf23387b20012d76b8a&product=sticky-share-buttons"></script>
  </head>

I suspect (though my be way off) that it's an issue with it not loading in time. Checked my console and got:

Uncaught TypeError: Cannot read property 'appendChild' of null
    at 1b204ce2d3c6f7dbe2d773358.js:43
    at 1b204ce2d3c6f7dbe2d773358.js:46

Is this the case, and if so how do I make it load on page load?

Oct
16
3 months ago
Activity icon

Replied to How To Update Images With Array

Ok that sorts out the initial error but when I try to upload now, all I get is a 404 page. Checked db and nothing was updated so I don't think it's a routing issue on redirect

Activity icon

Replied to How To Update Images With Array

Ok on further inspection of the error it's actually this line causing the problem:

$gameSearch->update($input);

Because this:

$input = $request->all();

Is also grabbing the image array:

array:14 [▼
  "_method" => "PATCH"
  "_token" => "MaP0WnARbUaRqlC4DNILgmW9TyUw9Aqt3fh11ioi"
  "title" => "Quackshot"
  "youtube" => null
  "price" => "15"
  "score" => "9"
  "description" => "Changed photos"
  "category_id" => "2"
  "sold" => "0"
  "manual" => "0"
  "box" => "0"
  "realphoto" => "0"
  "photo" => UploadedFile {#325 ▶}
  "image" => array:1 [▶]
]

Is there a way to remove this from the initial $request->all() and have it just for use by the foreach loop, or is that not possible:

"image" => array:1 [▶]
Activity icon

Replied to How To Update Images With Array

yeah, I don't really know how to go about updating with multiple files. dd shows:

array:14 [▼
  "_method" => "PATCH"
  "_token" => "MaP0WnARbUaRqlC4DNILgmW9TyUw9Aqt3fh11ioi"
  "title" => "Quackshot"
  "youtube" => null
  "price" => "15"
  "score" => "9"
  "description" => "Changed photos"
  "category_id" => "2"
  "sold" => "0"
  "manual" => "0"
  "box" => "0"
  "realphoto" => "0"
  "photo" => UploadedFile {#325 ▶}
  "image" => array:1 [▶]
]
Activity icon

Replied to How To Update Images With Array

I changed it to

$input = $request;

And also removed the line altogether but it didn't help

Activity icon

Started a new Conversation How To Update Images With Array

I have a form that allows for the upload of multiple images alongside other inputs and that works fine. However, I cannot update the entries with multiple images as I get the error:

Array to string conversion

Here is the part of the form which handles the upload:

<div class="form-group {{$errors->has('photo') ? 'has-error' : ''}}">
      {!! Form::label('photo', 'Image 1:') !!}
      {!! Form::file('photo', null, ['class'=>'form-control'])!!}
      @if($errors->has('photo'))
        {{$errors->first('photo')}}
      @endif
    </div>
    <div class="form-group {{$errors->has('image') ? 'has-error' : ''}}">
      {!! Form::label('image', 'Image 2:') !!}
      {!! Form::file('image[]', null, ['class'=>'form-control'])!!}
      @if($errors->has('image'))
        {{$errors->first('image')}}
      @endif
    </div>
    <div class="form-group {{$errors->has('image') ? 'has-error' : ''}}">
      {!! Form::label('image', 'Image 3:') !!}
      {!! Form::file('image[]', null, ['class'=>'form-control'])!!}
      @if($errors->has('image'))
        {{$errors->first('image')}}
      @endif
    </div>
    <div class="form-group {{$errors->has('image') ? 'has-error' : ''}}">
      {!! Form::label('image', 'Image 4:') !!}
      {!! Form::file('image[]', null, ['class'=>'form-control'])!!}
      @if($errors->has('image'))
        {{$errors->first('image')}}
      @endif
    </div>

and the method:

public function update(GamesRequest $request, $id)
    {
          $gameSearch = Game::findOrFail($id);
          $photoSearch = Photo::findOrFail($id);
          $input = $request->all();
          if($file = $request->file('photo')){
            $name = $file->getClientOriginalName();
            $file->move('images/games/', $name);
            $input['photo'] = '/images/games/' . $name;
          }
            $input['title'] = $request->title;
            $input['price'] = $request->price;
            $input['score'] = $request->score;
            $input['description'] = $request->description;
            $input['category_id'] = $request->category_id;
            $input['promote'] = 0;
            $input['sold'] = $request->sold;
            $input['manual'] = $request->manual;
            $input['box'] = $request->box;
            $input['realphoto'] = $request->realphoto;
            $input['youtube'] = $request->youtube;
          $gameSearch->update($input);

        // Handle multiple file upload
        if($images = $request->file('image'))
        {
            foreach($images as $key => $image) {
                $name = $image->getClientOriginalName();
                if ($image->move('images/games/', $name)) {
                    // store image to database.
                    $input = $request->all();
                    $input->game_id = $input->id;
                    $input->image = '/images/games/' . $name;
                    $photoSearch->update($input);
                }
            }
        }
        return redirect('admin/games');
            }

When I upload just one photo that doesn't use the image array, it works fine

Oct
15
3 months ago
Activity icon

Replied to Multi Image Upload Not Working

Ok that got it but now its saying the photo Id column is getting no value from this:

$image->photo_id = $request->id;

How would I get the Id that the request generates for the games table and put it in the photo_id field for each photo in the loop?

Activity icon

Started a new Conversation Multi Image Upload Not Working

I'm trying to get a form working with multi-image uploads too. When I try the upload, all I get is this error and I can't see where it's gone wrong:

Invalid argument supplied for foreach()

I don't know if I've done the form correctly for the upload part but here is the section for the image upload:

 {!! Form::open(['method' =>'POST', 'action'=> '[email protected]', 'files'=>true, 'enctype'=>'multipart/form-data']) !!}

<div class="form-group {{$errors->has('image') ? 'has-error' : ''}}">
  {!! Form::label('image', 'Image 1:') !!}
  {!! Form::file('image', null, ['class'=>'form-control'])!!}
  @if($errors->has('image'))
    {{$errors->first('image')}}
  @endif
</div>
<div class="form-group {{$errors->has('image') ? 'has-error' : ''}}">
    {!! Form::label('image', 'Image 2:') !!}
    {!! Form::file('image', null, ['class'=>'form-control'])!!}
    @if($errors->has('image'))
        {{$errors->first('image')}}
    @endif
</div>
<div class="form-group {{$errors->has('image') ? 'has-error' : ''}}">
    {!! Form::label('image', 'Image 3:') !!}
    {!! Form::file('image', null, ['class'=>'form-control'])!!}
    @if($errors->has('image'))
        {{$errors->first('image')}}
    @endif
</div>
<div class="form-group {{$errors->has('image') ? 'has-error' : ''}}">
    {!! Form::label('image', 'Image 4:') !!}
    {!! Form::file('image', null, ['class'=>'form-control'])!!}
    @if($errors->has('image'))
        {{$errors->first('image')}}
    @endif
</div>
<div class="form-group">
        {!! Form::submit('Add Game', ['class'=>'btn btn-primary']) !!}
      </div>
      {!! Form::close() !!}

And here is the method from the controller:

    public function store(GamesRequest $request)
    {
          $games = new Game();
          $games->image = 'blank';
          $games->title = $request->title;
          $games->score = $request->score;
          $games->description = $request->description;
          $games->price = $request->price;
          $games->category_id = $request->category_id;
          $games->promote = 0;
          $games->manual = $request->manual;
          $games->box = $request->box;
          $games->realphoto = $request->realphoto;
          $games->youtube = $request->youtube;
          $games->sold = 0;
          $games->save();

        // Handle multiple file upload
        $images = $request->file('image');
        foreach($images as $key => $image) {
            $name = $images->getClientOriginalName();
            if ($images->move('images/games/', $name)) {
                // store image to database.
                $image = new Photo();
                $image->photo_id = $request->id;
                $image->image = '/images/games/' . $name;
                $image->save();
            }
        }
          return redirect()->route('admin.games.index');
    }
Oct
14
3 months ago
Activity icon

Replied to Object Out Of Class In Dropdown Menu In Html Collective

Ah there it is, it's working now. Thank you ever so much!