vuejs v-for For a JSON response

0

I'm starting to use Vue.js, and I have the following code:

<div id="app-5">
    <section v-for="n in repeat">
     <div class="lol">-test-</div>      
    </section>
    <img v-bind:src="src"  width="80px" height="80px" :title="repeat">
    <hr>
    <input type="text" v-on:keyup.k="osome" v-on:keyup.r="osome2">

    <select name="" id=""    v-on:change="osome3" v-on:blur="osome3">
        <option v-for="opcion in options" v-bind:id="opcion.id"> {{ opcion.text }}</option>
    </select>
    <button v-on:click="callajax">CALLME</button>
<hr>
<h1 v-if="bol">{{ajax}}</h1>
<table>
    <tr v-for="data in ajax">
        <td>{{data}}</td>
        <td>{{data}}</td>
    </tr>
</table>
</div>


var app = new Vue({
      el: '#app-5',
      data: {
       repeat: 5,
       bol: true,
       src :"https://vuejs.org/images/logo.png",
       ajax : [
                  { names: 'placeholder' , age:"0" }
                ],
       options: [
                  { id: '1' , text:"uno" },
                  { id: '2', text:"dos" },
                  { id: '3', text:"tres" }
                ]
      },
      methods:{
         osome: function(){
            console.log("precionó: k");
            this.bol =false;
         },
          osome2: function(){
            console.log("precionó: R");
            this.bol =true;
         },
          osome3: function(){
            console.log("ONCHANGUE");
            this.bol = (this.bol) ? false : true;
         },
         callajax: function(){

                             $.ajax({
                                    type: 'POST',
                                    data: {"lol":"Lol"}, 
                                    url: 'vue.php',
                                     dataType: 'JSON',
                                                              //Server script to process data
                                    //Ajax events
                                    success: function(response){
                                            console.log("PHP: "+this.ajax);
                                            this.ajax = response;
                                    }.bind(this),
                                      error: function (xhr, ajaxOptions, thrownError) {
                                        alert(xhr.status);
                                        alert(ajaxOptions);
                                        alert(thrownError);
                                      }
                                });
         }
      }
    });

the answer I get from the php is this:

<?php 


$myArr = array("John", "Mary", "Peter", "Sally");
$myArr2 = array("19", "23", "51", "15");

$myJSON["names"] = $myArr;
$myJSON["age"] = $myArr2;

echo json_encode($myJSON);

 ?>

In theory I think I'm doing well and correctly assigning the answer to the variable ajax, I want to name names and ages in the table, but I have not achieved it, it has not worked for me to do it this way:

<table>
    <tr v-for="data in ajax">
        <td>{{data.names}}</td>
        <td>{{data.age}}</td>
    </tr>
</table>
    
asked by Andress Blend 05.01.2018 в 18:59
source

1 answer

0

ah, the answer in php plays like this:

$arr = [
    [
        "names" => "valore1",
        "age" => "valore1"
    ],
    [
        "names" => "valore2",
        "age" => "valore2"
    ],
    [
        "names" => "valore3",
        "age" => "valore3"
    ]
];
    
answered by 05.01.2018 в 19:16