Vue-Select: отправка двухмерного массива в: параметры

Плагин Vue-Select.

Я пытался сделать ввод с выпадающим списком для поиска и выбора на основе базы данных.

Итак, вот мой первый SQL-запрос под названием Ms_Location.

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, поэтому мне пригодится любая помощь. Спасибо!


vuejs2 vue-select
person Irfandy Jip    schedule 16.10.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ничего..

Моя ошибка, я не заметил свой receive_lokasi.php код

Вместо использования MYSQLI_NUM

while ($rowList = mysqli_fetch_array($sqltran,MYSQLI_NUM)) {                         
$response[] = $rowList;
}

Я должен использовать MYSQLI_ASSOC, как описано в здесь.

while ($rowList = mysqli_fetch_array($sqltran,**MYSQLI_ASSOC**)) {                         
$response[] = $rowList;
}

После этого измените это

<v-select :options="lokasi_list" placeholder='Type location..'></v-select>

К этому

<v-select label='nama_Location' :options="lokasi_list" placeholder='Type location..'></v-select>

После этого все загружается нормально.

person Irfandy Jip    schedule 21.10.2018

arrow_upward
0
arrow_downward

Вычисляемые свойства Vue обычно не используются для заполнения атрибутов данных vue, они обычно берут один или несколько атрибутов данных и объединяют их во что-то другое для использования в шаблоне.

В своем коде вы пытались заполнить атрибут данных vue 'lokasi_list' в вычисляемом свойстве 'get_lokasi', но вы никогда не вызываете 'get_lokasi' где-либо в шаблоне, поэтому lokasi_list остается пустым.

Другой подход к такой ситуации - использовать метод vue для извлечения данных из бэкэнда php через вызов ajax с чем-то вроде axios, и вы обычно использовали бы этот метод в событии жизненного цикла, созданном приложением vue, чтобы получить данные как можно скорее. .

e.g.

<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-инъекций, извините, если я укажу на то, что вы уже знали.

person Richard Creek    schedule 16.10.2018
comment
Привет, Ричард, спасибо за ответ, позвольте мне попробовать использовать Axios и расскажу, как это происходит. А по поводу файлов php. Это нормально, я знаю о проблемах безопасности в сети, которую я создаю, однако я все еще узнаю об этом и пока не знаю, что делать с веб-безопасностью ... но поскольку эта сеть предназначена только для моего собственного проекта и не будет размещаться в Интернете, я не беспокоился об этом. Спасибо за внимание, Ричард! - person Irfandy Jip; 17.10.2018