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>