常連

Vueを勉強しています。

https://jp.vuejs.org/v2/examples/grid-component.html
公式にあるテーブルソートのサンプルを参考に、
入力フィールドの一覧を作成し、ソートするサンプルを作りました。

■事象
　ヘッダークリック後、sortBy ⇒ filteredHeroesと動いてデータの表示順が変ります。
その状態で、Sortした列のデータを変更すると、再度filteredHeroesが実行され、並び順が変ってしまいます。
　Sortをしていない列のデータを変更しても、filteredHeroesは動きません。

■質問1
　上記事象についてcomputedを使用しているので、sort.sortKey、itemsに変更があったとき動くと考えています。
　しかしSortを行っていない列のデータの場合、データを変更してもfilteredHeroesは動きません。なぜでしょうか。

■質問2
　Sortした列のデータを変更しても、filteredHeroesを動かさないようにしたい場合はソースをどのように修正したら良いでしょうか。
　現在の想定では、computedをやめて、methodsに移すしかないと考えています。

作成中のためうまくSortがされないことがありますが、filteredHeroesが動く事象は確認できます。
index.html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="demo">
  <table>
    <thead>
      <tr>
        <th class="id" @click="sortBy('id')">ID</th>
        <th class="comment" @click="sortBy('comment')">コメント</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, idx) in filteredHeroes">
        <th><input type="text" value="1" v-model="item.id" ></th>
        <td><input type="text" value="1" v-model="item.comment" ></td>
      </tr>
    </tbody>
  </table>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    items: [
          { "id": 1, "comment": "1行目" },
          { "id": 2, "comment": "2行目" }
    ],
    sort: {
      sortKey: '',
      sortOrders: {}
    }
  },
  computed: {
    filteredHeroes: function () {
      console.log('filteredHeroesが実行されます。');
      var sortKey = this.sort.sortKey;
      var order = this.sort.sortOrders[sortKey] || 1;
      var items = this.items;
      if (sortKey) {
        items = items.slice().sort(function (a, b) {
          a = a[sortKey];
          b = b[sortKey];
          return (a === b ? 0 : a > b ? 1 : -1) * order;
        })
      }
      return items;
    }
  },
    mounted() {
      this.sort.sortOrders["id"] = 1;
      this.sort.sortOrders["comment"] = 1;
    },
  methods: {
    sortBy: function (key) {
      console.log('sortByが実行されます。:' + key);
      this.sort.sortKey = key;
      this.sort.sortOrders[key] = this.sort.sortOrders[key] * -1;
    }
  }
});
</script>
</body>
</html>
コード
```

よろしくお願いいたします。

Vue 一覧のソート。computedの動きについて

宜しくお願い致します。

Vue環境化で$.ajax()でJsonデータ（連想配列）を取り込みました。その際、各配列の並び順番どうりに番号を割り振っていきたいと思っています。.push()を使いindex1という名前の配列に並び順通りの番号を振っていきたいと考えてますが、vue環境下でどのように処理をしたら良いかわかりません。

尚、indexで配列の番号が取得できることは把握してますが、配列をフィルターなどで絞り込んだ際、絞り込み後の配列のindex番号が元の番号と変わってしまう為、上記の対応をしようと考えました。



$.ajax()でJsonデータ（連想配列）を取り込み
```ここに言語を入力
 created: function () {

      $.ajax({
          url : 'data.json',
          type : 'GET',
          dataType : 'json'
      })
      .done(function(data, textStatus, jqXHR) {
        this.products = data;

      }.bind(this))
      .fail(function(jqXHR, textStatus, errorThrown) {
        this.isError = true;
        this.message = '商品リストの読み込みに失敗しました。';
      }.bind(this));
    },
```

.push()を使いindex1に値を入れていく処理のイメージ

```ここに言語を入力
for (var i = 0; i <= this.products.length-1; i++) {
this.products.push(
{
'index1': i
}
);
```

**知りたいこと**
・vue上記のような処理を場合、どういった書き方になるのか（created内に追記で記載するのかなど）
・そもそも上記の記載も正しい書き方かわかりません
・自分が考えているやり方よりいい方法があれば知りたいです

vue環境でJsonデータを取り込みindex番号を指定の配列にPushするには

vueのdataプロパティに値を格納しようとしたら、元のインスタンスのクラスが保持されずに困っています。
具体的にはこのような挙動になります。

top.vue
```
<template>
  <h2>{{ all_events.constructor.name }}</h2>
</template>

<script type="text/javascript">
import EventsCollection from 'models/events_collection'

export default {
  data: function () {
    return {
      all_events: null,
    }
  },
  created(){
    console.log("EventsCollectionのコンストラクタは定義されている。");
    console.log(EventsCollection);

    console.log("EventsCollectionのインスタンスも作れる。");
    var aaa = new EventsCollection()
    console.log( aaa.constructor.name );

    console.log("ただ、vueオブジェクトに格納するとなぜか継承元のArrayになってしまう。");
    this.all_events = new EventsCollection()
    console.log( this.all_events.constructor.name );
  }
}
</script>
```

models/events_collection.js
```
export default class EventsCollection extends Array {
  constructor(arg) {
    super()
  }
```

出力結果
![イメージ説明](20005ada7319b49cea1892213f4fabb2.png)


この状態ではall_eventsからEventCollectionに定義したメソッドを呼び出せないので、呼び出せるようにしたいです。
環境はrailsのwebpackerです。

よろしくお願いします…

Vueのdataプロパティに値を格納するとインスタンスのクラスが取れる

### 前提・実現したいこと

LaravelでMySQLを使いたいのですが、各サイトを見ながら最低限の手順で進めても毎回```php artisan migrate```実行時にエラーメッセージも出ず止まってしまいます
MySQLは特に問題なく動いてます
エラーがなく申し訳ないのですが、考えられる原因があれば知りたいです

### 発生している問題・エラーメッセージ

![![イメージ説明](6e1e6fb917994df50d2bd301f71fa946.png)
migrate系のコマンド全部は止まります

terminalで実行しているのですが、処理を行っている際(?)のグルグル回る表示(進捗インジケータ？)が数秒後に止まっているので、ずっと処理を行なっているわけではないようです

### 該当のソースコード
#####.env
```
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:f4jGAJrf/Okvh/X/FKj3KkfcbYe0gbWLlgJyYwhJlbk=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test_data
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

```
##### database.php
```
<?php

use Illuminate\Support\Str;

return [

    /*
    |--------------------------------------------------------------------------
    | Default Database Connection Name
    |--------------------------------------------------------------------------
    |
    | Here you may specify which of the database connections below you wish
    | to use as your default connection for all database work. Of course
    | you may use many connections at once using the Database library.
    |
    */

    'default' => env('DB_CONNECTION', 'mysql'),

    /*
    |--------------------------------------------------------------------------
    | Database Connections
    |--------------------------------------------------------------------------
    |
    | Here are each of the database connections setup for your application.
    | Of course, examples of configuring each database platform that is
    | supported by Laravel is shown below to make development simple.
    |
    |
    | All database work in Laravel is done through the PHP PDO facilities
    | so make sure you have the driver for your particular database of
    | choice installed on your machine before you begin development.
    |
    */

    'connections' => [

        'sqlite' => [
            'driver' => 'sqlite',
            'url' => env('DATABASE_URL'),
            'database' => env('DB_DATABASE', database_path('database.sqlite')),
            'prefix' => '',
            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
        ],

        'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

        'pgsql' => [
            'driver' => 'pgsql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '5432'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'charset' => 'utf8',
            'prefix' => '',
            'prefix_indexes' => true,
            'schema' => 'public',
            'sslmode' => 'prefer',
        ],

        'sqlsrv' => [
            'driver' => 'sqlsrv',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', 'localhost'),
            'port' => env('DB_PORT', '1433'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'charset' => 'utf8',
            'prefix' => '',
            'prefix_indexes' => true,
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Migration Repository Table
    |--------------------------------------------------------------------------
    |
    | This table keeps track of all the migrations that have already run for
    | your application. Using this information, we can determine which of
    | the migrations on disk haven't actually been run in the database.
    |
    */

    'migrations' => 'migrations',

    /*
    |--------------------------------------------------------------------------
    | Redis Databases
    |--------------------------------------------------------------------------
    |
    | Redis is an open source, fast, and advanced key-value store that also
    | provides a richer body of commands than a typical key-value system
    | such as APC or Memcached. Laravel makes it easy to dig right in.
    |
    */

    'redis' => [

        'client' => env('REDIS_CLIENT', 'phpredis'),

        'options' => [
            'cluster' => env('REDIS_CLUSTER', 'redis'),
            'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
        ],

        'default' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'password' => env('REDIS_PASSWORD', null),
            'port' => env('REDIS_PORT', 6379),
            'database' => env('REDIS_DB', 0),
        ],

        'cache' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'password' => env('REDIS_PASSWORD', null),
            'port' => env('REDIS_PORT', 6379),
            'database' => env('REDIS_CACHE_DB', 1),
        ],

    ],

];

```

##### 2019_12_15_214915_create_test_table.php
```
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTestTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('test', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->text('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('test');
    }
}

```
##### MySQL
![イメージ説明](db4e7e8ae0ff68f0909ff8d292c5a4c9.png)

##### MySQL8.0ユーザーの認証方式
![イメージ説明](54c998a4f32ce4ddacb87acdb13a3d4a.png)

### 試したこと

0. `composer create-project laravel/laravel testApp`
↓
0. MySQLでtest_dataというデータベースを作成
↓
0. `php artisan make:migration create_test_table`
↓
0. .env と 2019_12_15_214915_create_test_table.phpの編集
↓
0. `php artisan migrate`で止まる


ポート番号(3306)のチェックとか`php artisan config:cache`もしましたが特におかしいところはありませんでした

### 補足情報（FW/ツールのバージョンなど）

#####環境
MacOS Catalina 10.15.1
PHP 7.4.0
Laravel 6.7.0
MySQL 8.0.18