CODEWITHSUNDEEP
vuejs2vue-select
Irfandy J.
Irfandy J.

Reputation: 1464

Vue-Select: Pushing a 2 dimensional array to :options

The plugin Vue-Select.

What I was trying to do is, make a search-select-dropdown input based on database.

So here's my SQL first named Ms_Location.

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

My 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>

And this is my 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);
?>

However, I can't seem to get the option shown. This only happens after I make the get_lokasi(). So the mistake is probably there? Or perhaps I was missing something.

I've tried to print the lokasi_list somewhere, and yes, the value is there, but not shown in the dropdown bar.

Also, I'm new to Vue, so any help would be good. Thanks!

Upvotes: 0

Views: 1251

Answers (2)

Irfandy J.
Irfandy J.

Reputation: 1464

Nevermind..

My mistake, I didn't notice my receive_lokasi.php code

Instead of using MYSQLI_NUM

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

I should be using MYSQLI_ASSOC, as documented in here. 

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

After that change this

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

To this

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

After that, everything loads fine.

Upvotes: 1

Richard Creek
Richard Creek

Reputation: 46

Vue's computed properties aren't normally used to populate vue data attributes, they normally take one or more data attributes and combine them into something different for the template to use.

In your code you've tried to populate the vue data attribute 'lokasi_list' in the computed property 'get_lokasi', but you never call 'get_lokasi' anywhere in the template so lokasi_list remains empty.

Another approach to this sort of situation is to use a vue method to fetch data from the php backend via an ajax call with something like axios, and you'd normally use that method in the vue app's created life cycle event to get the data asap.

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>

Sorry to mention this, but in your php you've got:

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

That looks like you were planning to use it as part of your sql, but it would have been vulnerable to SQL injection attacks, sorry If I'm pointing out something you already knew.

Upvotes: 0

Related Questions