Vue.js with pure PHP

Asked

Viewed 4,781 times

1

I’m starting at the Vue.js and now I’m in a moment that I can not do. I need for example connect in PHP and select the Mysql to bring some data. I do not know how to proceed in Vue.js, I’ll put the code here.

I tried to do so through an internet tutorial but I think it did not work.

My PHP:

<?php

$conn = mysql_connect("127.0.0.1","root","");
$db   = mysql_select_db("techall14");

$sql = mysql_query("SELECT * FROM estoque_filial");

$i = 0;
while ($resposta = mysql_fetch_array($sql))
{

    $ret[$i]["Id"]=$resposta['Id'];
    $ret[$i]["filial"]=$resposta['filial'];
    $ret[$i]["descricao"]=$resposta['descricao'];
    
    $ano = substr($resposta['data_cad'],0,4);
    $mes = substr($resposta['data_cad'],5,2); 
    $dia = substr($resposta['data_cad'],8,2); 
    $data_cad = $dia."/".$mes."/".$ano;
    
    $ret[$i]["data_cad"]=$data_cad;
    $ret[$i]["operador"]=$resposta['operador'];
    $ret[$i]["status"]=$resposta['status'];
$i ++;

}

header("Content-type: application/json");
echo json_encode($ret);
        
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue2</title>
    <script src="vueJS/vue.min.js"></script>
    
  </head>
  <body>
    <div id="root">
        <table border="1" cellpadding="0" cellspacing="0" >
            <tr>
                <th width="162">Teste (1)</th>
                <th width="144">Teste (2)</th>
                <th width="124">Teste (3)</th>
                <th width="120">Teste (4)</th>
            </tr>
            <tr v-for="user in users">
                <th>{{user.filial}}</th>
                <th>sadasd</th>
                <th>asda</th>
                <th>asda</th>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
          el: '#root',
          data:{
                  users: [],
                newUser:{ username: "", email:""}
             },
             mounted: function(){
                console.log("mounted");
                this.getAllUsers();
            },
            
            methods:{
            
                getAllUsers: function(){
                    
                    axios.get("http://127.0.0.1/VUEJS/teste.php")
                    .then(function(response){
                        console.log(response);
                        if(response.data.error){
                            app.errorMessage = response.date.message;    
                        }else{
                            app.users = response.data.users
                        }    
                        
                    });
                
                    
                }    
                
            }
            
            
        })
    </script>
  </body>
</html>

<?php

$conn = mysql_connect("127.0.0.1","root","");
$db   = mysql_select_db("techall14");

$sql = mysql_query("SELECT * FROM estoque_filial");

$i = 0;
while ($resposta = mysql_fetch_array($sql))
{

    $ret[$i]["Id"]=$resposta['Id'];
    $ret[$i]["filial"]=$resposta['filial'];
    $ret[$i]["descricao"]=$resposta['descricao'];

    $ano = substr($resposta['data_cad'],0,4);
    $mes = substr($resposta['data_cad'],5,2); 
    $dia = substr($resposta['data_cad'],8,2); 
    $data_cad = $dia."/".$mes."/".$ano;

    $ret[$i]["data_cad"]=$data_cad;
    $ret[$i]["operador"]=$resposta['operador'];
    $ret[$i]["status"]=$resposta['status'];
$i ++;

}

header("Content-type: application/json");
echo json_encode($ret);

?>

My HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue2</title>
    <script src="vueJS/vue.min.js"></script>

  </head>
  <body>
    <div id="root">
        <table border="1" cellpadding="0" cellspacing="0" >
            <tr>
                <th width="162">Teste (1)</th>
                <th width="144">Teste (2)</th>
                <th width="124">Teste (3)</th>
                <th width="120">Teste (4)</th>
            </tr>
            <tr v-for="user in users">
                <th>{{user.filial}}</th>
                <th>sadasd</th>
                <th>asda</th>
                <th>asda</th>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
          el: '#root',
          data:{
                  users: [],
                newUser:{ username: "", email:""}
             },
             mounted: function(){
                console.log("mounted");
                this.getAllUsers();
            },

            methods:{

                getAllUsers: function(){

                    axios.get("http://127.0.0.1/VUEJS/teste.php")
                    .then(function(response){
                        console.log(response);
                        if(response.data.error){
                            app.errorMessage = response.date.message;    
                        }else{
                            app.users = response.data.users
                        }    

                    });


                }    

            }


        })
    </script>
  </body>
</html>
vue.js

1 answer

1


Your error is in using the app variable. It does not represent anything in your code. To feed user data, you must use this.users or, if you are in another context, store this, and then use the + users variable. Example of how your code would look in the right way:

new Vue({
  el: '#root',
  data: {
    users: [],
    newUser: {
      username: "",
      email: ""
    },
    errorMessage: ""
  },
  mounted: function() {
    console.log("mounted");
    this.getAllUsers();
  },

  methods: {

    getAllUsers: function() {

      var self = this; // Armazena a instância do Vue em self

      axios.get("http://127.0.0.1/VUEJS/teste.php")
        .then(function(response) {
          console.log(response);
          if (response.data.error) {
            self.errorMessage = response.date.message;
          } else {
            // Faz referência a data.users
            self.users = response.data.users;
          }
        });
    }
  }

})

  • Bruno, very grateful for the answer. It worked

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.