Jsonpは上手くいきませんでしたが

PHPでデータベースMySQLからJSONを動的に生成します

PHP

<?php
define('DSN', 'mysql:host=localhost;dbname=sample_shop');
define('DB_USER', 'XXXX');
define('DB_PASSWORD', 'X〇XXX');

error_reporting(E_ALL & ~E_NOTICE);

$pdo = new PDO(DSN, DB_USER, DB_PASSWORD);

$stmt = $pdo->prepare("SELECT * FROM product");
$stmt->execute();

$products = array();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
  $products[] = array(
    'id'            => (int)$row['id'],
    'name'       => $row['name'],
    'price'        => (int)$row['price'],
    'image'      => $row['image'],
    'delv'        => (int)$row['delv'],
    'isSale'      => (boolean)$row['isSale']
  );
}

$json = json_encode($products, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);

header("Content-Type: application/json");
echo $json;
?>

main.js

// 数値を通貨書式「#,###,###」に変換するフィルター
Vue.filter('number_format', function(val) {
  return val.toLocaleString();
});
// 商品一覧コンポーネント
var app = new Vue({
  el: '#app',
  data: {
    //「セール対象」のチェック状態（true：チェック有り、false：チェック無し）
    showSaleItem: false,
    //「送料無料」のチェック状態（true：チェック有り、false：チェック無し）
    showDelvFree: false,
    //「並び替え」の選択値（1：標準、2：価格が安い順）
    sortOrder: 1,
    // 商品リスト
    products: [],
    // エラーの有無
    isError: false,
    // メッセージ
    message: ''
  },
  // ライフサイクルハック
  created: function() {
    // JSONPのURL（サーバーに配置する）
    var url = 'http://localhost/api/products.php';
    // 非同期通信でJSONPを読み込む
    $.ajax({
      url : url,                // 通信先URL
      type: 'GET',              // 使用するHTTPメソッド
      dataType: 'json',        // レスポンスのデータタイプ
    })
    .done(function(data, textStatus, jqXHR) {
      this.products = data;
    }.bind(this))
    .fail(function(jqXHR, textStatus, errorThrown) {
      this.isError = true;
      this.message = '商品リストの読み込みに失敗しました。';
    }.bind(this));
  },
  computed: {
    // 絞り込み後の商品リストを返す算出プロパティ
    filteredList: function() {
      // 絞り込み後の商品リストを格納する新しい配列
      var newList = [];
      for (var i=0; i<this.products.length; i++) {
        // 表示対象かどうかを判定するフラグ
        var isShow = true;
        // i番目の商品が表示対象かどうかを判定する
        if (this.showSaleItem && !this.products[i].isSale) {
          //「セール対象」チェック有りで、セール対象商品ではない場合
          isShow = false;  // この商品は表示しない
        }
        if (this.showDelvFree && this.products[i].delv > 0) {
          //「送料無料」チェック有りで、送料有りの商品の場合
          isShow = false;  // この商品は表示しない
        }
        // 表示対象の商品だけを新しい配列に追加する
        if (isShow) {
          newList.push(this.products[i]);
        }
      }
      // 新しい配列を並び替える
      if (this.sortOrder == 1) {
        // 元の順番にpushしているので並び替え済み
      }
      else if (this.sortOrder == 2) {
        // 価格が安い順に並び替える
        newList.sort(function(a,b){
          return a.price - b.price;
        });
      }
      // 絞り込み後の商品リストを返す
      return newList;
    }
  }
});