Cannot print the list return value from axios get using v-for-CodePudding

I am new to Vue.js, so I am building a simple html with vue.js website and show the axios get result from myphpadmin data. Everything works fine until the end I cannot show the json message on my screen.

new Vue({

el: "#app",

data() {
  return {      
    databaseList: [] , // the list result is store into response.data.show_all_mfug?
    inputt: {mfug: ""},
  };
},

mounted(){
  this.readMfug();
},

methods:{
  readMfug(){
    axios.get("http://localhost/products_db/read_php/read_mfug.php?action=read").then(function(response) {
      let json = response.data;
      app.databaseList = response.data.show_all_mfug;
      console.log("AA. ", app.databaseList ); //DEBUG PRINT
    }

  },

In the line AA., it can show this json successfully

After I can reflect from axios get, I want to transfer my json stuff 0 : {mfugkey: '1', mfugname: 'AAAAAAAAA'} to my html page.

The html page is like this below:

<div v-for="show_all_mfug in databaseList" >
        {{show_all_mfug}}
        {{show_all_mfug.mfugkey}}
</div>

Both of the {{ }} does show nothing. the mfugkey which is 1 from {{show_all_mfug.mfugkey}}?

If you need php this is the one below:

<?php

$conn = new mysqli("localhost", "root", "", "zion_test_db");
if ($conn->connect_error){
    die("Connection Failed!">$conn->connect_error); //no connection error
}

ini_set("display_errors", "1");
error_reporting(E_ALL);
$result = array('error'=>false);
$action = "";

if(isset($_GET['action'])){
    $action = $_GET['action'];

}
if($action == "read"){
    $sql = $conn->query("SELECT * FROM ALL_MFUG");
    $show_all_mfug = array();
    while ($row = $sql->fetch_assoc()){
        array_push($show_all_mfug, $row);
    }

    $result['show_all_mfug'] = $show_all_mfug;
    echo json_encode($result);
}
?>

It show the json successfully in axios.get, every backend works fine, reflect the mfugname and key , but while I use v-for it has nothing? Thank you to have a look in advanced and any help is appreciated.

CodePudding user response：

This looks like vue2, so you'll likely need to access your data properties through the this keyword as opposed to app, so for example:

this.databaseList = response.data.show_all_mfug

You could also skip the line where you set json = response.data since you never use that variable.

CodePudding user response：

Just use this keyword since you are using vue2 this.databaseList=response.data.show_all_mfug