I am having difficulty to get model.title's value and display it into console when click event triggered. For example,there is total 3 records into my json file.The first model's title name is IRIS.When I click on link then I want to also display it on console. Can anyone help me please.
<div id="app">
<div v-for="model in myData">
<h1>{{model.title}}</h1>
<p>{{model.project}}</p>
<p>{{model.bedrooms}}</p>
<a href="#" @click="getTitle">View Detail</a>
</div>
</div>
var vm = new Vue({
el:'#app',
data:{
myData:[]
},
created:function(){
this.fetchData();
this.getTitle();
},
methods:{
fetchData: function(){
var url='data.json';
axios.get(url)
.then(function(res){
vm.myData= res.data.models;
console.log(this.myData);
});
},
getTitle:function() {
var url='j.json';
axios.get(url)
.then(function(res){
//vm.myData= res.data.models.getTitle;
console.log(res.data.models.getTitle);
});
}
}
});
The below code is from data.json file
{
"models": [
{
"title": "IRIS",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 3
},
{
"title": "LILAC",
"project": "ABC",
"category": "DOUBLE",
"bedrooms": 4
},
{
"title": "ASTER",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 4
}
]
}