TimeSocks

TimeSocks

Member Since 3 Years Ago

Experience Points 13,760
Experience Level 3

1,240 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 25
Lessons
Completed
Best Reply Awards 2
Best Reply
Awards
  • Start Your Engines Achievement

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • First Thousand Achievement

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • One Year Member Achievement

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • Two Year Member Achievement

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • Three Year Member Achievement

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • Four Year Member Achievement

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • Five Year Member Achievement

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • School In Session Achievement

    School In Session

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

  • Welcome To The Community Achievement

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • Full Time Learner Achievement

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • Pay It Forward Achievement

    Pay It Forward

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

  • Subscriber Achievement

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • Lifer Achievement

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • Laracasts Evangelist Achievement

    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 Achievement

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • Laracasts Veteran Achievement

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • Ten Thousand Strong Achievement

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • Laracasts Master Achievement

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • Laracasts Tutor Achievement

    Laracasts Tutor

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

  • Laracasts Sensei Achievement

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • Top 50 Achievement

    Top 50

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

18 Mar
1 month ago

TimeSocks left a reply on CriticalCSS Error Running Composer Update

@TYKUS - Not that I know of, no.

TimeSocks started a new conversation CriticalCSS Error Running Composer Update

I've just run composer update in an attempt to bring my dependencies up to speed to install the laravel-webhooks package. However, something went wrong, and now when I try and run it again (or do anything like make a new controller), I get the following error:

local.ERROR: ReflectionException: Class Alfheim\CriticalCss\Console\CriticalCssMake does not exist

I have tried installing CriticalCss using NPM as per the github page for it but it makes no difference. Any ideas how to fix this?

11 Feb
2 months ago

TimeSocks left a reply on PDOException: Could Not Find Driver (for SQLite)

I solved it. I had to enable the sqlite PDO driver in my php.ini file.

TimeSocks left a reply on PDOException: Could Not Find Driver (for SQLite)

@SERGIU17 - I'm on Windows, sorry, didn't mention that.

TimeSocks left a reply on PDOException: Could Not Find Driver (for SQLite)

@VILFAGO - That's missing the point. Firstly, it's not missing the database file, it's missing the driver for sqlite, period. Secondly, I don't want to use the same database for testing as for development, as per the Birdboard series. I don't want to fill my development database with test data. Hence using a temporary sqlite database for testing, or trying to.

TimeSocks started a new conversation PDOException: Could Not Find Driver (for SQLite)

Howdy,

I've just started a fresh Laravel project, looking to approach it from a TDD point of view. With that in mind, I have setup a simple test, and as per the Birdboard series have set phpunit to use an sqlite database for testing in phpunit.xml

<env name="DB_CONNECTION" value="sqlite"/>
<env name="DB_DATABASE" value=":memory:"/>

However, when I run my test, I get an error caused by:

PDOException: could not find driver

Sqlite is installed on my system (I went and got it and installed it) though the executable only works from the folder I extracted it to. How can I get it working with Laravel?

03 Feb
2 months ago

TimeSocks left a reply on Form Not Submitting

@CRONIX - Jeez. That's what I get for coding past my bedtime ?

02 Feb
2 months ago

TimeSocks left a reply on Form Not Submitting

@SNAPEY - Tried that just before I read this and it works. But why doesn't the <button> work?

TimeSocks started a new conversation Form Not Submitting

Hi there,

I'm encountering a very strange problem while going through the Birdboard series. I have made a simple form for creating a project as per episode 7:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Create a project</h1>
    <form action="/projects" method="post">
      @csrf
      <input type="text" name="title" value="">
      <input type="text" name="description" value="">
      <button type="button" name="button" type="submit">Submit</button>
    </form>
  </body>
</html>

This just doesn't submit. I click the button and nothing happens. I have tried a dd in the relevant method in the controller, but it never triggers, like it's not even getting that far. FWIW here is the store() method:

public function store()
    {
      //validate
      $attributes = request()->validate([
        'title' => 'required',
        'description' => 'required',
      ]);

      //persist
      auth()->user()->projects()->create($attributes);

      //redirect
      return redirect('/projects');
    }

And the route file:

Route::group(['middleware' => 'auth'], function(){
  Route::get('/projects/create', '[email protected]');
  Route::get('/projects/{project}', '[email protected]');
  Route::get('/projects', '[email protected]');
  Route::post('/projects', '[email protected]');
  Route::get('/home', '[email protected]')->name('home');
});

What gives?

25 Jan
2 months ago

TimeSocks left a reply on How Can I Make This Code DRYer?

That works absolutely perfectly, many thanks!

TimeSocks started a new conversation How Can I Make This Code DRYer?

I am building a weather station app with the OpenWeather API, Vue, and Laravel. I am grabbing the next 5 hours of forecast data which I want to display in columns. Here's my component:

Forecast

Temperature {{ currentTemp[0] }}º

Min. Temp. {{ tempMin[0] }}

{{ desc[0] }}

{{ time[0] }}

    </div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>

</div>
export default { data: function(){ return { time: [], currentTemp: [], tempMin: [], desc: [], iconCode: [], } },
  methods: {
      getWeather() {
        var apiKey = "<apikey>";
        var location = "<location>";
        var units = "metric";
        var url = "http://api.openweathermap.org/data/2.5/forecast?id=" + location + "&APPID=" + apiKey + "&units=" + units;
        this.$http.get(url).then(response => {
          for(var i = 0; i < 5; i++){
            this.time.push(response.data.list[i].dt_txt.substr(11,5));
            this.currentTemp.push(Math.round(response.data.list[i].main.temp));
            this.tempMin.push(Math.round(response.data.list[i].main.temp_min));
            this.desc.push(response.data.list[i].weather[0].description);
            this.iconCode.push(String(response.data.list[i].weather[0].id).trim());
          }
        });
      },
  },

  created(){
    this.getWeather();
  },

}

Obviously I could just use the same code in each column with a different index in the arrays each time, but that seems wasteful. I assume I can do something with v-for but I don't know enough about Vue to know how to do it, especially when using multiple arrays in a component. How can I do this?

24 Jan
3 months ago

TimeSocks left a reply on Variables Not Rendering In Vue Template

@REALRANDYALLEN - Yes, and yes, they're all populated appropriately.

TimeSocks left a reply on Don't Get Any Data From Database

Where are you retrieving the data from the database? Also, you are passing camping to the view but then using $place.

TimeSocks started a new conversation Variables Not Rendering In Vue Template

I am building a weather station app, and am trying to add forecast data from the OpenWeather API. I can successfully pull down the data and log it to the console, but for some reason I can't display it in the template.

I am grabbing the next five hours of data and storing it in arrays. At the moment I am just trying to display the first hour. Here's my code:

<template>
  <section>
    <h1>Forecast</h1>

        <i :class="['owf owf-',iconCode[0]]"></i>
        <p>Temperature {{ currentTemp[0] }}</p>

    </div>
  </section>
</template>

<script>
  export default {
      data: function(){
        return {
          time: [],
          currentTemp: [],
          tempMin: [],
          desc: [],
          iconCode: [],
        }
      },

      methods: {
          getWeather() {
            var apiKey = "<apikey>";
            var location = "<location>";
            var units = "metric";
            var url = "http://api.openweathermap.org/data/2.5/forecast?id=" + location + "&APPID=" + apiKey + "&units=" + units;
            this.$http.get(url).then(response => {
              console.log(response.data.list);
              for(var i = 0; i < 5; i++){
                this.time[i] = response.data.list[i].dt_txt;
                this.currentTemp[i] = response.data.list[i].main.temp;
                this.tempMin[i] = response.data.list[i].main.temp_min;
                this.desc[i] = response.data.list[i].weather[0].description;
                this.iconCode[i] = response.data.list[i].weather[0].icon;
              }
            });
          },
      },

      beforeMount(){
        this.getWeather();
      },
  }
</script>

The

and

text is rendered but not the data from Vue. What am I doing wrong?

23 Jan
3 months ago

TimeSocks left a reply on In A Complete Mess With Vue And Charts.js

@REALRANDYALLEN - Thanks! This works nicely, now that I have imported vue-resource (for some reason I thought that was unnecessary with Vue 2). I've added in a prop to handle which dataset the chart displays so I can reuse the component too.

22 Jan
3 months ago

TimeSocks started a new conversation In A Complete Mess With Vue And Charts.js

Hi folks,

I am getting myself in a complete mess trying to put together a simple chart for a weather station I am putting together. The idea is that a wifi enabled micro-controller will, via a Python script, populate an SQLite database with temperature, humidity, and pressure data. That part is all set up. For the moment I have test data in the database.

I have set up a Laravel app and am trying to follow along with the Vue/Charts.js series here on Laracasts, but it's muddied slightly by a different version of Vue being used, and the fact that I'm a moron. Vue has too many damned curly brackets for my liking.

Anyway. I have an API route set up that, at the moment, grabs my dummy temperature data and returns it like this:

[{"hour":"2206","temperature":"12"},{"hour":"2206","temperature":"13"},{"hour":"2206","temperature":"5"},{"hour":"2206","temperature":"8"},{"hour":"2207","temperature":"11"},{"hour":"2207","temperature":"10"}]

The idea being that my chart will display the last 24 hours of data, recorded once per hour.

However, this is as far as I can get. I have no idea how to get the data where it needs to go in my Graph component.:

<template>
  <section>
    <canvas width="300" height="300" ref="chart"></canvas>
  </section>
</template>

<script>
    export default {
        props: ['url'],
        mounted() {
            console.log('Graph component mounted.')
            var context = this.$refs.chart.getContext('2d');
            this.$http.get(this.url)
                .then(response => {
                  console.log(response.data);

                  var data = {
                                labels: Object.keys(response.data),
                                datasets: [{
                                             label: 'My First dataset',
                                             data: [
                                                       Object.keys(response.data).map(key => response.data[key])
                                                   ],
                                    fill: false,
                                }   
                      }
                  new Chart(context, { type: "line", data: data });
                })
        }
    }
</script>

(url is a prop passed in the view - ideally I'd like to be able to reuse the chart for humidity and pressure simply by hitting a different API route to grab the relevant set of data)

This just descends into a mess of 'unexpected token' errors and I have no idea how to fix it. Help, please and thank you!

21 Jan
3 months ago

TimeSocks left a reply on Object Of Class Illuminate\Database\Eloquent\Builder Could Not Be Converted To String

@SERGIU17 - That worked... Jeff didn't use ->get() in the video I was referring to...

Thanks :)

TimeSocks started a new conversation Object Of Class Illuminate\Database\Eloquent\Builder Could Not Be Converted To String

I have a simple table with a temperature and a created_at column. I'm trying to grab all the temperatures recorded in the last 24 hours to pass to charts.js. I have the following function right in my web route:

Route::get('api/temperature', function() {
  return Temperature::where('created_at', '>=', Carbon::now()->subDays(1)->toDateTimeString())
    ->selectRaw('strftime("%h",created_at) as hour, temp as temperature')
    ->groupBy('hour');
});

But this gives me the error:

Object of class Illuminate\Database\Eloquent\Builder could not be converted to string

What gives?

TimeSocks started a new conversation Multiple Charts With Vue And Charts.js

Hi folks,

I'm going through the 'Charts and You' series. It's a little out of date both in terms of Vue and Charts.js, but I think I've made the necessary changes, namely, using mounted instead of ready, and updating the syntax for instantiating a new Chart.

However, I have hit a snag with adding multiple charts to the page. In the video, Jeff removes the tag's ID, and changes the context to:

var context = this.$el.getContext('2d');

However, this gives me an error:

this.$el.getContext is not a function

Here's my Vue component:

<template>
  <section>
    <canvas width="600" height="400"></canvas>
  </section>
</template>

<script>
    export default {
        mounted() {
            console.log('Graph component mounted.')
            var context = this.$el.getContext('2d');
            var data = {
                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                            datasets: [{
                                label: 'My First dataset',
                                data: [
                                    30,120,122
                                ],
                                fill: false,
                            }, {
                                label: 'My Second dataset',
                                fill: false,
                                data: [
                                    45,35,23
                                ],
                            }],
                    options: {
                      responsive:true,
                    }
                }
            new Chart(context, { type: "line", data: data });
        }
    }
</script>

Here's the Vue part of app.js

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

And here's the page markup:

<section id="graphs">
    <div class="container">
      <div class="columns">
        <div class="column">
          <h2>Temperature</h2>
          <graph></graph>
        </div>
        <div class="column">
          <h2>Humidity</h2>
          <graph></graph>
        </div>
        <div class="column">
          <h2>Pressure</h2>
          <graph></graph>
        </div>
      </div>
    </div>
  </section>

Any ideas?

20 Mar
1 year ago

TimeSocks left a reply on Why Won't This Value Bind?

@m-rk Success! In the end I just put it in one file rather than introducing another point of failure with Laravel Mix, but it's working. Many thanks for your help.

19 Mar
1 year ago

TimeSocks left a reply on Why Won't This Value Bind?

@m-rk ok, I don't get it...

Does the component need a template element at all? If so, what would it consist of? the entire form? Or can I just have the form as normal in the template and use the component 'headless' just to get the data into Vue?

TimeSocks left a reply on Why Won't This Value Bind?

Thanks @m-rk I wouldn't ask you to - I should be able to cobble something together. Thanks @topvillas likewise.

TimeSocks left a reply on Why Won't This Value Bind?

Ok - how would that look in JavaScript?

TimeSocks left a reply on Why Won't This Value Bind?

How would I go about using one in this context, generally speaking?

TimeSocks left a reply on Why Won't This Value Bind?

@topvillas that is becoming clear. I've just never used them before. Time to do some learnding I guess.

TimeSocks left a reply on Why Won't This Value Bind?

I'm not using a component.

Basically, the user clicks a material and is taken to the material (basically a product) page. The materials are stored in a database, so I use Laravel to grab the material and display its page:

 public function show($id)
    {
        $material = Material::find($id);
        return view('materials.show', compact('material'));
    }

I then want to use Vue to add the relevant material to my shopping basket (Moltin-Cart), via an API call:

this.$http.post('/api/buy/addToBasket', material).then(response => {
                   this.basketAddSuccess = true;

to this:

public function addToBasket(Request $request)
    {
        // grab material information
        $material = Material::find($request->id);

        // extract price from the database to ensure it's correct
        $row = $material->price;
        
        // create an item
        $item = array(
                'id' => $material->id,
                'name' => $material->title,
                'price' => $row,
                'quantity' => $request->qty
            );

        // Make the insertion...
        $this->cart->insert($item);
    }

But if components are the way to go, I'm happy to learn!

TimeSocks left a reply on Why Won't This Value Bind?

@m-rk I have done both - it's passing {id: " ", qty: "1"} which is precisely what is expected when the id isn't being passed to Vue - which is the real problem.

TimeSocks left a reply on Why Won't This Value Bind?

@topvillas that was my thought. If that's the case, how do I stop that? Surely the whole point of v-bind is to update data based on what's happening in the template?

TimeSocks left a reply on Why Won't This Value Bind?

@topvillas that may be the case, but it doesn't solve the initial problem that the data never makes into Vue in the first place. It's not binding. If I view the Vue object in the Vue Devtools, it shows as ' ' - essentially the value I initialise it with.

TimeSocks started a new conversation Why Won't This Value Bind?

I'm making a basket system using Laravel and Vue. I have a data object in my Vue file, cart.js:

data: {
  material: {
    id: '',
    qty: '1',
  },
}

And when the 'Add to Basket' button is clicked on the product page, the following function is called:

addToBasket: function(material){
        this.$http.post('/api/buy/addToBasket', material).then(response => {
                this.basketAddSuccess = true;
                }, response => {
                    //error
                });
                
                setTimeout(function(){ this.basketAddSuccess = false; }, 4000);
}

However, this fails with a 500 error, because as far as I can see the id is not being bound to the Vue instance. Here's the view code:

<form v-on:submit.prevent="addToBasket(material)">
  <input type="hidden" v-model="material.id" v-bind:value="{{ $material->id }}">
  <div class="form-group">
        <label for="qty">Quantity</label>
        <input class="form-control" name="qty" type="number" v-model="material.qty" v-bind:value="1">
  </div>
  <button class="btn btn-block btn-primary">@{{ buttonText }}</button>
</form>

Laravel is injecting the value correctly as per the rendered code:

<input type="hidden" v-model="material.id" value="1">

But this isn't being bound to Vue. I have tried every permutation of v-model and v-bind (I know that you shouldn't use both on the same input - this is just the last in a long line of attempts) that I can think of but nothing seems to work. Help!

14 Mar
1 year ago

TimeSocks started a new conversation [Vue Warn]: Duplicate Value Found In V-for

Hi folks,

I have a Vue (1.x) based shopping basket system working in conjunction with a Laravel backend using Moltin-Cart. The basket is populated, retrieved and updated using API calls to the backend.

I can add items to the basket without an issue:

addToBasket: function(){
                var that = this;
                var item = this.book;
                console.log(item);
                this.$http.post('/api/buy/addToBasket', item);
                this.basketAddSuccess = true;
                setTimeout(function(){ that.basketAddSuccess = false; }, 4000);
            }

which hits the backend:

public function addToBasket(Request $request)
    {
        // grab photo information
        $book = Book::find($request->id);

        // extract price from the database to ensure it's correct
        $row = $book->price;
        
        // create an item
        $item = array(
                'id' => $book->id,
                'name' => $book->title,
                'price' => $row,
                'quantity' => $request->qty
            );

        // Make the insertion...
        $this->cart->insert($item);
    }

When I hit my fetchBasket API function I get this as expected:

{
027c91341fd5cf4d2579b49c4b6a90da: {
id: 1,
name: "Book Title",
price: 40,
quantity: "1"
}
}

The long random string is the cart id.

The problem comes when I try to list the basket contents using a simple v-for:

<tr v-for="item in basketItems">

But this throws lots of errors:

[Vue warn]: Duplicate value found in v-for="item in basketItems": "0". Use track-by="$index" if you are expecting duplicate values.

One error for each character in the JSON string, in fact.

So Googling around I find track-by and try to implement it first with item.id:

<tr v-for="item in basketItems" track-by="item.id">

This throws VM4389:3 Uncaught TypeError: Cannot read property 'id' of undefined

I have also tried:

<tr v-for="item in basketItems" track-by="id">

But this throws the 'one error for every character in the JSON string' thing at me.

Then I tried with $index:

<tr v-for="item in basketItems" track-by="$index">

This doesn't throw an error, but it instead creates an empty basket item entry in the basket view for each character in the JSON string.

Any ideas as to how to fix it?

09 Jan
1 year ago

TimeSocks left a reply on Defining A Custom Route

I have done it with:

Route::get('widgets', function(){
    return redirect('products/large-blue-widget');
});

TimeSocks left a reply on Defining A Custom Route

@topvillas this would use the full product name, however, right? I'd like to use a shorter, basically hard-coded name. e.g. if the usual URL is:

/products/large-blue-widget

I'd like the shorter URL to simply be:

/widgets

TimeSocks started a new conversation Defining A Custom Route

Hi,

I have a site with products with urls in the format www.mysite.com/products/long-product-name, the slug being grabbed from the database, naturally. I'd like to create a route with a shortened version of the product to include in marketing, e.g. www.mysite.com/product.

How can I do this?

20 Jun
1 year ago

TimeSocks left a reply on Defining A Relationship For A Report Card System

@thc1967 I tried that, but when I go into tinker and try, say,:

$pupil = App\Pupil::find(1)->with('subjects')->get()

I get an error:

Column not found: 1054 Unknown column 'subjects.pupil_id' in 'where clause' (SQL: select * from `subjects` where `subjects`.`pupil_id` in (1, 2, 3))

19 Jun
1 year ago

TimeSocks started a new conversation Defining A Relationship For A Report Card System

Hi,

I'm looking to design a report card system purely as a learning tool, but I'm stumped on defining the relationships. Naturally I have Students and Subjects. Do I need a Grades table as well? How should I define their relationships?

TIA

19 Oct
2 years ago

TimeSocks left a reply on TokenMismatchException - Dying Over Here

I'm having this problem but none of the solutions is working for me. I have:

  1. Added the token meta tag in the page head
  2. Ensured the login/register form contains {{ csrf_token() }}
  3. Verified that the token in the head matches that in the form in the rendered HTML.

But the error still occurs. This is in Laravel 5.3 with the standard auth scaffolding. Any ideas?

18 Oct
2 years ago

TimeSocks left a reply on Populating Lookup Tables

Ah ha, that's solved it! Grazie @giovanniciriello :)

TimeSocks left a reply on Populating Lookup Tables

Sure.

class Photo extends Model
{
    public $timestamps = false;

    public function sizes()
    {
        return $this->belongsToMany(Size::class);
    }

    public function categories()
    {
        return $this->belongsToMany(Category::class);
    }
}
class Category extends Model
{
    public $timestamps = false;

    public function photos(){
        return $this->belongsToMany(Photo::class);
    }
}
class Size extends Model
{
    public $timestamps = false;

    public function photos(){
        return $this->belongsToMany(Photo::class);
    }
}

Seems unlikely that this has any bearing on my latest issue though.

TimeSocks left a reply on Populating Lookup Tables

@giovanniciriello thanks, yeah, Stack Overflow came to the rescue in the mean time. I am however having a weird error. I've recoded the controller a little:

foreach($request->category as $category)
   {
       $catphoto = new Category_Photo(['photo_id' => $photo->id, 'category_id' => $category]);
       $photo->categories()->save($catphoto);
   }

foreach($request->size as $size)
   {
       $photosize = new Photo_Size(['photo_id' => $photo->id, 'size_id' => $size]);
       $photo->sizes()->save($photosize);
   }

Here's an example of the data passed in the request:

"category" => array:3 [▼ 0 => "1" 1 => "2" 2 => "3" ] "size" => array:4 [▼ 0 => "1" 1 => "2" 2 => "3" 3 => "4" ]

However, while the insertions work and the lookup tables are populated, every other inserted row contains the id of the previously inserted entry, e.g:

id photo_id category_id 85 55 1 86 55 85 87 55 2 88 55 87 89 55 3 90 55 89

Any ideas?

TimeSocks started a new conversation Populating Lookup Tables

Hi,

I have a site set up to sell my photographic prints. The photos are in categories and are available in a number of sizes, so I have a photos, categories and sizes table, joined by a category_photo and photo_size table.

Up to now I have been adding new photos to the site using PHPMyAdmin, but manually updating three tables is a bit of a pain, so I am building a little backend to make it quicker. I can add a new photo to the photos table easily enough, but when it comes to populating the lookup tables for category and size I am running into a problem with the table names.

Here is my code for populating the category_photo table:

foreach($request->category as $category)
        {
            $cat_photo = new Category_Photo;
            $cat_photo->photo_id = $photo->id;
            $cat_photo->category_id = $category;
            $cat_photo->save();
        }

However, when I run this, I get the error:

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'db.category__photos' doesn't exist (SQL: insert into `category__photos` (`photo_id`, `category_id`) values (50, 1))

It is looking for a table called category_photos rather than category_photo. How can I rectify this? TIA.

25 Jul
2 years ago

TimeSocks left a reply on Why Does This Throw An Error In IE Only?

Well, turns out declaring that item variable properly did the trick.

Now to handle the PHP error gracefully so you don't all come and haunt me. Thanks for the input guys.

23 Jul
2 years ago

TimeSocks left a reply on Why Does This Throw An Error In IE Only?

@zachleigh yeah I'm going to try that when I get back to a system with IE on Monday. Fallback will be the old fashioned way.

TimeSocks left a reply on Why Does This Throw An Error In IE Only?

@zachleigh I know the exact problem. When vue works it grabs data from the view, binds it to a variable, and passes it to the controller. When vue doesn't work (eg in IE) the data isn't bound and an empty request is passed to the controller, at which point it throws a 500 error because it tries to query the database with null data.

I will probably just switch to using a good old fashioned form to post the data to the backend with a page change.

22 Jul
2 years ago

TimeSocks left a reply on Why Does This Throw An Error In IE Only?

@jimmck Sure, a PHP error isn't good, but it's caused by a very specific problem. When Vue does its job, it's a non-issue. It's like not adding name attributes to your form markup and then looking in the PHP for the problem when it can't find the POSTed data - the problem is on the client side, it's not the PHP's problem if the front end isn't set up right.

TimeSocks left a reply on Why Does This Throw An Error In IE Only?

@jimmck the server side code works flawlessly on EVERY OTHER BROWSER. It takes in data from a request and queries the database based on that request data - basically, an ID. Simple stuff.

Vue, in Internet Explorer, is not binding the data the server side code needs to make the database query. It's not that data is not in an expected state: there is no data. In Internet Explorer, Vue sends an empty request to the back end, and that causes it to flip out.

TimeSocks left a reply on Why Does This Throw An Error In IE Only?

@d3xt3r no console errors, just a 500 error when the back end throws a wobbly. I have the same problem - my only access to IE is on my work PC, now I'm at home on my Mac I can't test anything >.<

TimeSocks left a reply on Why Does This Throw An Error In IE Only?

@d3xt3r here's the Vue code:

new Vue({
        el:'#photo',

        data:{
            photo:{
                id:' ',
                size:' ',
                qty:' '
            },

                basketAddSuccess:false,
                sizeSelected:false

            },

            methods:{

                addToBasket:function addToBasket(){
                    var that=this;
                    item=this.photo;
                    this.$http.post('/api/buy/addToBasket',item);
                    this.basketAddSuccess=true;
                    setTimeout(function(){that.basketAddSuccess=false;},4000);
                }
            }
        });

Here's the markup

<input type="hidden" v-model="photo.id" value="{{ $photo[0]->id }}">
<select class="c-select" v-model="photo.size" v-on:click="sizeSelected = true">
<input class="form-control" name="qty" type="number" v-model="photo.qty" value="1">

@jlrdw Vue is 2 years old and a favourite of Jeff, seemed like a good bet to me.

TimeSocks left a reply on Why Does This Throw An Error In IE Only?

@jimmck @d3xt3r

The browser isn't causing the error directly. But as the data in my inputs is not being bound to the Vue object being passed to the controller, the controller is looking for data that doesn't arrive in the request, so it throws an error.

In all other browsers, the data is bound to the Vue object as it should be, is passed to the controller, and the controller does what it needs to do.

I am not using ES6 code: I was originally, but that caused a different error in both IE and Safari, so I have changed the methods. I am on mobile at the moment but will post code in a short while.