Обновление текста элемента при срабатывании функции $ emit - PullRequest
Новая
       63

Обновление текста элемента при срабатывании функции $ emit

0 голосов
/ 30 января 2020

В vue, можно ли будет обновить текст элемента, когда внутри элемента запущена функция $ emit?

Вот фрагмент кода: 

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

Внутри Laravel клинок л oop, я генерирую ссылки. Внутри ссылки я получил vue событие клика, при нажатии открывается модальное окно с формой.

После обновления записи (с ajax) я запускаю this.$emit('updateRoleName',response.name);

Это было бы неплохо, если бы я мог обновить текст ссылки, по которому щелкнули, без каких-либо дополнительных методов vm.

Есть мысли ... можно ли это сделать?

1 Ответ

0 голосов
/ 30 января 2020

Следуя предложениям, я остановился на этом решении. Не самая лучшая, но вид работ.

Итак, в Laravel blade я создаю ссылку, здесь я также могу выполнить проверку ролей / разрешений: 

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

Внутри <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>

После нажатия на ссылку откроется модальное окно с формой обновления. После завершения обновления $ emit (Event.fire ()) будет другим событием для обновления текста ссылки. 

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();
        });
}

Назад внутрь <role-name-link />, мне все равно нужно сравнить идентификаторы if(this.role.id == role.id) this.name = role.name;, иначе это будет обновить все names в таблице.

Это обновит имя в сгенерированной таблице php. Есть одна ошибка: если я снова нажму на ту же ссылку, внутри формы будет показано оригинальное имя, которое повторяется php.

Любые мысли, предложения. Как сделать это лучше .... более элегантным?

...