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>

获取所有工作所需的实际代码将留作练习，但我希望这会将您推向正确的方向。祝你好运！

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

1 个答案: