I am struggling to access and display the value of model.title in the console when a click event is triggered. In my json file, there are a total of 3 records. The first model's title is IRIS. When I click on the link, I want it to be displayed in the console as well. Can someone please assist me with this issue?
<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
}
]
}