Question

我想做的是基于数据库进行搜索选择下拉输入。

所以这是我的SQL，首先命名为 Ms_Location。

Number of views | frequency
----------------|-----------
        1       |     3
        3       |     1
        4       |     1

我的 index.php

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

这是我的 receive_lokasi.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>

但是，我似乎无法显示该选项。只有在我创建 get_lokasi（）之后，这种情况才会发生。所以可能是错误所在？也许我错过了一些东西。

我尝试将lokasi_list打印在某个地方，是的，该值在那里，但没有显示在下拉栏中。

而且，我是Vue的新手，所以任何帮助都很好。谢谢！

Answer 1

Vue的计算属性通常不用于填充vue数据属性，它们通常采用一个或多个数据属性并将它们组合为模板使用的不同内容。

在您的代码中，您尝试在计算属性“ 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注入攻击的影响，如果我指出您已经知道的内容，对不起。

Answer 2

没关系。

我的错误，我没有注意到我的receive_lokasi.php代码

代替使用MYSQLI_NUM

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

我应该使用here.

中记录的 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>

之后，一切正常。

Vue-Select：将二维数组推入：options

2 个答案: