laxsmi

Experience

9,130

0 Best Reply Awards

  • Member Since 7 Months Ago
  • 89 Lessons Completed
  • 9 Favorites

25th August, 2018

laxsmi left a reply on V-if Working On Localhost But Not On Production • 1 month ago

I eventually identified the issue so I'm posting the solution, hoping that it can be useful to others: when replacing

<img v-if="(item.stars.filter(e => e.star_type === 2).length > 0)">

with

<img v-if="(item.stars.filter(e => e.star_type == 2).length > 0)">

the code works on my server.

24th August, 2018

laxsmi left a reply on To Show Images To Given Size • 1 month ago

You can use regular CSS when you insert your image :

laxsmi started a new conversation V-if Working On Localhost But Not On Production • 1 month ago

Hello everybody,

I have this Vue component showing images according to item.stars.

It works fine on localhost but doesn't work on my production server. The Vue properties that should cause the images to be displayed are present, but for some reason the images aren't shown.

Is there anything wrong with the JS code?

Any help would be appreciated.

        <img v-lazy="'/uploads/' + item.images[0].image_path + '_small.jpg'"
        :alt="item.name"
        style='height: auto'>

        <img src='/icons/unique2.png'
        v-if="(item.stars.filter(e => e.star_type === 2).length > 0)"
        style="position: absolute; left: 0; top: 0; width: 30%;">

        <img src='/icons/Star-01.png'
        v-if="(item.stars.filter(e => e.star_type === 1).length > 0)"
        style="position: absolute; right: 0; top: 0; width: 20%;">

12th July, 2018

laxsmi left a reply on Access Eloquent Relationship In Vue.js • 2 months ago

Wonderful!

So I defined the accessor and I added an appends attribute to my model to get it through Vue.js:

protected $appends = ['status'];

Thank you for your help ouhare!

laxsmi left a reply on Access Eloquent Relationship In Vue.js • 2 months ago

Thank you ouhare for noticing this: I made the correction accordingly.

My initial problem persists, though...

laxsmi started a new conversation Access Eloquent Relationship In Vue.js • 2 months ago

Hello everybody,

I'm trying to achieve something that seems pretty simple, but I must be missing something.

I have a list of items in the database. I want to display a list of all items with Vue.js

So I have set up an "Items" component to do this:

<template>
<table class="table">

  <tr v-for='item in items' v-bind:key='item.id'>

    <td>{{ item.name }}</td>

    <td>{{ item.price }} €</td>

    <td>{{ item.status }}</td>

    <td>
  </tr>

</table>
</template>

and this components gets the list of items via an AJAX request when mounted:

<script>

     data() {
       return {
           items: {
               name: '',
               price: '',
               status: ''
           },
       }
     },

     mounted() {
       this.getAllItems();
     },

     methods: {
       getAllItems() {
         axios.get('/admin/get/')
           .then(response => {
             this.items = response.data.items;
           });
       },
   }

</script>

My controller is like this:

  public function getAllItems() {
    $items = Item::withTrashed()->with('status')->get();
    return response()->json([
      'items'    => $items
  ], 200);
  }

and everything works fine, but the {{ item.status }} part. This is an Eloquent relationship defined in my model:

  public function status() {
      return $this->trashed();
  }

and it works in PHP:

>>> $i = Item::find(12)->status();
=> false

but when called from Vue.js I get the following response with a 500 error: "Call to a member function addEagerConstraints() on boolean"

What I am doing wrong?

Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.