Блог

Я новичок в VueJS и решил использовать библиотеку под названием Vue-good-table (документ здесь: https://xaksis.github.io/vue-good-table / ) для отображения таблицы данных в моем проекте laravel вместо обычных таблиц данных Yajra, которые используют jQuery. Я смог отобразить свои данные из серверной части, но теперь я изо всех сил пытаюсь включить кнопку редактирования в пользовательский столбец «действия». Я пробовал много способов, но ни один из них не был успешным. Мне нужен способ перенаправления на страницу редактирования при нажатии кнопки, поэтому я предполагаю, что мне нужно обработать пользовательский шаблон столбца в моем файле представления php. Вот код, чтобы сделать его более явным :

Контроллер Php :

 public function index() {
    $users = json_encode(User::latest()->get());
    $userColumns = json_encode([
            [
                'label' => 'ID',
                'field' => 'id'
            ],
            [
                'label' => 'name',
                'field' => 'name'
            ],
            [
                'label' => 'Email',
                'field' => 'email'
            ],
            [
                'label' => 'Action',
                'field' => 'actions'
            ]
    ]);

    return view('admin.users.index', compact('users', 'userColumns'));
}
 

Компонент Vue :

 <template>
<div>
    <vue-good-table
        :columns="columns"
        :rows="rows"
        compactMode
    >
        <slot></slot>
    </vue-good-table>

</div>
</template>

<script>
   import { VueGoodTable } from 'vue-good-table';

   export default {
     props: ['rows', 'columns'],
     components : { VueGoodTable },
   }
</script>

<style scoped>

</style>
 

app.js файл :

 import Vue from 'vue';
import Datatables from './components/datatables';



const app = new Vue({
    el: '#app',

    components : {
        'bdfr-datatables' : Datatables,
    },
}
 

Просмотр файла php :

 @section('content')
    <bdfr-datatables :rows="{{ $users }}" :columns="{{ $userColumns }}">
        <!-- wishing to display this part -->
        <template slot="table-row" slot-scope="props">
            <span v-if="props.column.field === 'actions'">
                <a href="#">Edit</a>
            </span>
            <span v-else>
                @{{props.formattedRow[props.column.field]}}
            </span>
         </template>
    </bdfr-datatables>
@endsection
 

Чего мне не хватает, чтобы заставить его работать? Заранее благодарю вас.

Я изо всех сил пытаюсь включить кнопку редактирования в пользовательский столбец «действия». Я пробовал много способов, но ни один из них не был успешным. Мне нужен способ перенаправить на страницу редактирования при нажатии кнопки

Если я правильно понял ваш вопрос, вы хотели бы отобразить ссылку, которая перенаправляет на форму пользовательского издания, через URL, который будет выглядеть так /user/1/edit .

• Сначала проверьте, что возвращает Laravels

Возможно, вы захотите пойти с dd(User::latest()->get()); этим. По умолчанию вы должны получить идентификатор вместе с другой информацией, если только вы $guarded не указали их явно.

• Затем адаптируйте свое решение с помощью системы шаблонов vue-good-table

Если вы проверите эту ссылку, она покажет вам пример таблицы, в которой, похоже, отображается столбец «возраст» с определенным стилем, а остальные по умолчанию. Что здесь интересно, так это то, что он показывает вам, что каждый из ваших пользователей может быть доступен через props.row .

Итак, что вам нужно сделать, это что-то вроде следующего:

   <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'actions'">
      <a :href="`/user/${props.row.id}/edit`">Edit</a>
    </span>
    <span v-else>
      {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>