Jan 7, 2023

Level 18

Double Quotes is braaking alpine

I want to insert a collection to javascript and I use @json but it gets broken here is the code. in the class

$this->userList = User::get(['id as key', 'name as value']);

in the view

   x-data="{
            init() {
                let tribute = new Tribute({
                    trigger: '@',
                    values: @json($userList)
                });
                tribute.attach($refs.textarea);
            }
        }"

Now I figured out that the issue is related to double quotes, THe json facade gives back json with double quotes but somehow double quotes is braking my code. I tried to put manually json in the blade see below.

<!-- This worked -->
 x-data="{
            init() {
                let tribute = new Tribute({
                    trigger: '@',
                    values: [
                        { 'key': 'Phil Heartman', 'value': 'pheartman' },
                        { 'key': 'Gordon Ramsey', 'value': 'gramsey' }
                    ]
                });
                tribute.attach($refs.textarea);
            }
        }"
<!-- This didn't work -->
x-data="{
            init() {
                let tribute = new Tribute({
                    trigger: "@",
                    values: [
                        { "key": "Phil Heartman", "value": "pheartman" },
                        { "key": "Gordon Ramsey", "value": "gramsey" }
                    ]
                });
                tribute.attach($refs.textarea);
            }
        }"

I would like to know why this is happining, and aslo if there is anyway to force laravel to return single quotes

webrobert

3 years ago

Level 51

Here is a slight more complex Tributejs with AlpineJs...

<div class="flex gap-1 w-full" x-data="{ mentionables : @entangle('mentionables') }"
     x-init='
            $nextTick(() => {
                let thisRef = $refs.{{ $emit }};
                let tribute = new Tribute({
                    noMatchTemplate: function () {
                        return "<span onclick=\"window.Livewire.emit(`addCompany`); this.remove()\" " +
                        "class=\"p-3 py-1 block bg-blue-500 text-white rounded-md cursor-pointer\">Add<\/span>"
                    },
                     menuItemTemplate: function (item) {
                        return "<div class=\"flex items-center gap-1\">" +
                               "<div>" + item.string + "</div>" +
                               "</div>";
                    },
                    selectTemplate: function (item) {
                        $wire.add(item.original)
                        $wire.set("search", "")
                        return "";
                    },
                    values: function (text, cb) {
                        cb(mentionables)
                    },
                    autocompleteMode: true,
                    allowSpaces: true,
                    trigger: "",
                });
                tribute.attach(thisRef);
            })
    '>
...

Dave Wize

3 years ago

Level 18

@webrobert Thanks for your reply. I will definitly look into your codde for some good insights. Have you encountered any errors related to double quotes vs single quotes? As I now tested, the problem on my end begins when the same quote as the x-data is interduced in the code. so for an exemple if I use x-data'{}' than the code will break if somewhere in the middle I will put a ' for some reason, but if I do x-data"{}" with double quotes then it will break when I interduce the first double quote in the code.

webrobert

3 years ago

Level 51

@Dave Wize yes. That’s why I shared my code. It works. You’ll notice there are a couple back ticks too. You can add the @js in the x data then use the use init to use the alpine variable. You don’t need the callback method for the values that I’m using. It’s tributejs callback so my values can be a dynamic lookup.

Dave Wize

3 years ago

Level 18

@webrobert Thanks. Followed your pettern and it seems that the double quotes problem is resoleved... But now I'm getting an error

Uncaught TypeError: arr.reduce is not a function

webrobert

3 years ago

Best Answer

Level 51

@Dave Wize

controller etc..

return view('test', [ 'mentionables' =>
      User::all()->map( fn ($item) => [
        'id' => $item['id'],
        'key' => $item['name'],
      ])
]);

blade

<div class="flex gap-1 w-full" x-data="{ mentionables : @js($mentionables) }"
     x-init='
        $nextTick(() => {
            let thisRef = $refs.test;
            let tribute = new Tribute({
                values : mentionables,
                selectTemplate: function (item) {
                    return `@` + item.original.key;
                },
                trigger: "@",
            });
            tribute.attach(thisRef);
        })
'>

    <input x-ref="test" class="appearance-none border-0 ring-0 focus:outline-none focus:ring-0 p-0 py-0.5 w-full shrink text-lg">
</div>

works

webrobert

3 years ago

Level 51

my bad, updated it now it also drops the name into the input

Dave Wize

3 years ago

Level 18

@webrobert I'm actually not sure what is the difference between these two versions, but this makes the difference.

<!--works-->
 $this->userList = User::all()->map( fn ($item) => [
            'id' => $item['id'],
            'key' => $item['name'],
          ]);
<!--Don't work-->
$this->userList = User::get(['id as value', 'name as key']);

I would love to get an explanation on the difference between these two. @webrobert Thanks for your help

1 like

Dave Wize

3 years ago

Level 18

Actually now I see that both started working, I'm so confused what was wrong in the first place...

webrobert

3 years ago

Level 51

@Dave Wize

This is a better version [if you just want users for tribute].

User::get(['id as value', 'name as key']);

The other way pulls everything from the database and then maps over it.

Usually I’m doing something else with the users besides just passing them to tribute so I had the map snippet handy.

Please or to participate in this conversation.