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

Question

我有一些来自MySQL的数据，我想把它放到vue.js数据属性中，这样我就可以用v迭代它了。

我应该选择哪种格式(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
    $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>

获得所有工作所需的实际代码将作为一个练习留下，但我希望这会将您推向正确的方向。祝好运!