Update element's text when $emit function has been triggered

Question

In vue, would it be possible to update element text when $emit function has been triggered inside the element?

Here is a code snippet:

<a href="#" @click="fire('openCrudRoleModal',{{$role}})"
 @updateRoleName="change text in this <a>">{{$role->name}}</a>

Within Laravel blade loop, I am generating links. Inside link I got vue click event, when clicked, it opens a modal with form.

After I update record (with ajax), I am triggering this.$emit('updateRoleName',response.name);

It would be nice if I could update the link text, which was clicked, without any additional vm methods.

Any thoughts..., can this be done?

You can't apply the @listen event to the anchor element because it's not actually the parent of the child that performs this.$emit(). You would need to a tad bit of refactoring to support this. — Ohgodwhy
You could add an event listener for 'updateRoleName' like so: this.$on('updateRoleName', name => this.role.name = name);. But why not just call a method instead of emitting an updateRoleName event? — thanksd
@thanksd, I am just looking for cleanest/simplest way to update the $role->name. Also, currently the link is php generated, not sure how could i connect it to vue? I would like to have the php generatation, so I can check roles & permissions before link has been generated. — Guntar

Guntar Guntar · Accepted Answer · 2020-01-30T00:12:26

Fallowing suggestions, I stopped at this solution. Not the best, but kind of works.

So in Laravel blade I am generating link, here I can also do the roles/permission check:

<th>
    @can('edit role') <role-name-link :role="{{$role}}" /> @endcan
</th>

Inside <role-name-link />

<template>
    <a href="#" @click="open" @updateRoleName="updateName">{{name}}</a>
</template>

<script>
    export default {
        props: ['role'],
        name: "RoleNameLink",
        data() {
            return {
                name: this.role.name
            }
        },
        methods: {
            open(){
                Event.fire('openCrudRoleModal',this.role);
            },
            updateName(e){
                this.name = e.name;

            }
        },
        created() {
            Event.listen('updateRoleName', (role) =>{
                if(this.role.id == role.id) this.name = role.name;
            });
        }
    }
</script>

Once link is clicked on, it will open a modal with update form. After update is completed it will $emit (Event.fire()) another event to update link text.

onSubmit(){
    this.spinner = this.form.processing;
    this.form[this.action]('/admin/roles/')
        .then(response => {
            this.$toastr.s('Role '+this.actionName[this.action]);
            if(this.action == 'patch') Event.fire('updateRoleName',response);
            this.hide();
        });
}

Back inside <role-name-link />, I still need to compare id's if(this.role.id == role.id) this.name = role.name;, else it will update all names in the table.

This will update the name in the php generated table. One gotcha there is, if I click the same link again, inside form it will show me the original name that was echoed by php.

Any thoughts, suggestions. How to make it better.... more elegant?

Update element's text when $emit function has been triggered

1 Answers