0

プラグインVue-Select。

私がやろうとしていたのは、データベースに基づいて検索選択ドロップダウン入力を作成することです。

これが最初にMs_Location という名前の SQL です。

id_Loc | name_Loc
LOC0001 | Indonesia
LOC0002 | China
LOC0003 | America

私のindex.php

<!DOCTYPE html>
<html>
<head>
  
</head

<body>
  <div class="form-group">
    <label for="lokasi_id" class="control-label required"><strong>Lokasi</strong></label>
    <v-select :options="lokasi_list" placeholder='Type location..'></v-select>
  </div>
  
  <script type="text/javascript" src="js/vue.js"></script>
  <script src="https://unpkg.com/vue-select@latest"></script>

  Vue.component('v-select', VueSelect.VueSelect);
  
  var app = new Vue ({
            el: '#app',
            data: {
                lokasi_select: '',
                lokasi_list: [],
            },
            // End of data

            computed: {
                get_lokasi() {
                    var list_loc = new Array();
                    list_loc = <?php include('receive_lokasi.php') ?>;
                        for(var i=0; i<list_loc.length; i++) {
                            var pushLoc = {
                                label: list_loc[i][1], value: list_loc[i][0]
                            }
                            this.lokasi_list.push(pushLoc);
                        }
                    return list_loc[0][1];
                }
            }

        })
    });
</script>
</body>
</html>

これが私のreceive_lokasi.phpです

    <?php
    include ('koneksi.php');

    $condition = "1";
    if(isset($_GET['userid'])){
        $condition = " id=".$_GET['userid'];
    }

    $sqltran = mysqli_query($con, "SELECT id_Loc, name_Loc FROM ms_location")or die(mysqli_error($con));
    $response = array();

    while ($rowList = mysqli_fetch_array($sqltran,MYSQLI_NUM)) {                         

        $response[] = $rowList;
    }

    echo json_encode($response);
    mysqli_close($con);
?>

ただし、表示されるオプションを取得できないようです。これは、 get_lokasi()を作成した後にのみ発生します。間違いはおそらくそこにありますか？あるいは、何かが欠けていたのかもしれません。

lokasi_list をどこかに印刷しようとしましたが、はい、値はそこにありますが、ドロップダウン バーには表示されません。

また、私は Vue を初めて使用するので、どんな助けも役に立ちます。ありがとう！

4

2 に答える 2

0

Vue の計算されたプロパティは、通常、vue データ属性を設定するために使用されません。通常、1 つまたは複数のデータ属性を取り、それらをテンプレートで使用する別のものに結合します。

あなたのコードでは、計算されたプロパティ「get_lokasi」に vue データ属性「lokasi_list」を入力しようとしましたが、テンプレートのどこにも「get_lokasi」を呼び出さないため、lokasi_list は空のままです。

この種の状況に対する別のアプローチは、vue メソッドを使用して、axios などの ajax 呼び出しを介して php バックエンドからデータを取得することです。通常は、vue アプリの作成されたライフサイクル イベントでそのメソッドを使用して、データをできるだけ早く取得します。 .

例えば

<script>
    Vue.component('v-select', VueSelect.VueSelect);

    var app = new Vue({
      el: '#app',
      data: {
        lokasi_select: '',
        lokasi_list: [],
      },
      created: function() {
        this.fetchLocations();
      },
      methods: {
        fetchLocations: function() {
          axios.get('/api/locations-end-point')
            .then((response) => {
              this.lokasi_list = response.data //might need to change this to match how your php is returning the json
            })
            .catch((error) => {
              //handle the error
            })
          }
        }
    });
</script>

これについて言及して申し訳ありませんが、あなたのphpには次のものがあります：

if(isset($_GET['userid'])){
    $condition = " id=".$_GET['userid'];
}

SQL の一部として使用する予定だったようですが、SQL インジェクション攻撃に対して脆弱でした。

于 2018-10-16T15:42:02.373 に答える