javascript - 将数据从 MySQL 传递到 Vue.js 数据属性

Question

我有一些从 MySQL 获得的数据，我想将其放入 vue.js 数据属性中，以便我可以使用 v-for 对其进行迭代。

我应该选择什么格式(json 或数组？)以及我必须做什么才能使数据在 vue.js 中可用？

<?php
  $sql = 'SELECT * FROM kurse;';
  $result = mysqli_query($conn, $sql);
  $resultCheck = mysqli_num_rows($result);

  if($resultCheck > 0) {

    $termineObj = new stdClass();
    while ($row = mysqli_fetch_assoc($result)) {

      echo $termineObj->datum = $row['datum'];
      $termineObj->uhrzeitvon = $row['uhrzeitvon'];
      $termineObj->uhrzeitbis = $row['uhrzeitbis'];
      $termineObj->freieplaetze = $row['freieplaetze'];

      $termine = json_encode($termineObj);
      echo $termine;
    }
  }
?>

...


<script>var app4 = new Vue({
  el: '#app-4',
  data: {
    termine: termine,
    },
  delimiters: ["((","))"],
  methods: {
    flipstate:function(){
      console.log('flipped');
    }
  },
})</script>

Answer 1

首先，您应该在 PHP 端使用 json_encode() 将您的数据数组转换为 javascript 可以使用的数组。

其次，您有两种实际使用它的选择:

a) 将 JSON 编码的数组/对象直接放入您想要的数据属性中，例如

<?php
    $data = array();
    //parse query results, insert into $data
?>

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            target_attr: <?=json_encode($data)?>
        },
        . . .
    });
</script>

b) 使用 ajax 调用从 JSON 插入数据，例如

您的 PHP 文件

<?php
    $data = array();
    //parse query results, insert into $data
    echo json_encode(array('returned_data'=>$data));
?>

你的 Javascript

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            target_attr: [] //or {} if you are expecting an object
        },
        mounted: {
            var vue_instance = this;
            //using jQuery for simplicity
            $.post('/path/to/your/php/file', {some: 'data if needed'}, function(data) {
                var obj = $.parseJSON(data);
                vue_instance.target_attr = obj.returned_data;
            });
        },
        . . .
    });
</script>

获取让一切正常工作所需的实际代码将留作练习，但我希望这能将您推向正确的方向。祝你好运!