As I venture into the world of developing a Single Page Application (SPA) using Vue.js, I find myself facing a steep learning curve due to my limited knowledge on the subject. Despite following a tutorial and managing to get something up and running, I still consider this task to be relatively simple!
My goal is to create a basic page that accomplishes the following:
- Makes a REST API call to fetch some JSON data
- Displays a list with links of a specific field from the retrieved results on the left side of the screen
(So far, so good)
Now, I wish to implement a feature where clicking on one of the links will reveal the value of another field corresponding to the same record on the right side of the screen.
For example, let's assume the JSON data looks like this:
{
"jokes": [
{"setup":"setup1", "punchline":"punchline1"},
{"setup":"setup2", "punchline":"punchline2"},
{"setup":"setup3", "punchline":"punchline3"}
]
}
On the screen, I envision seeing:
setup1
setup2
setup3
Thus, clicking on setup1 will display punchline1, setup2 will show punchline2, and so forth.
Below is my current code snippet - specifically aimed at displaying the punchline in the moduleinfo div. While acknowledging the existing solution doesn't function as intended, I have scoured for similar examples without much success. Any guidance or pointers would be warmly welcomed.
<template>
<div class="home">
<div class="module-list">
<input type="text" v-model.trim="search" placeholder="Search"/>
<div>
<ul>
<li class="modules" v-for="value in modulesList" :key="value.id">
<a href="#">{{ value.setup }}</a>
</li>
</ul>
</div>
</div>
<div class="moduleinfo">
<h2>Module info</h2>
<!-- <p>{{ value.punchline }}</p> -->
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Home',
data: function(){
return {
jokes: [],
search : ""
}
},
mounted() {
this.getModules();
},
methods: {
getModules() {
var self = this
const options = {
method: 'GET',
url: 'https://dad-jokes.p.rapidapi.com/joke/search',
params: {term: 'car'},
headers: {
'x-rapidapi-key': '...',
'x-rapidapi-host': 'dad-jokes.p.rapidapi.com'
}
};
axios.request(options)
.then(response => {
self.jokes = response.data;
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
}
},
computed: {
modulesList: function () {
var jokes = this.jokes.body;
var search = this.search;
if (search){
jokes = jokes.filter(function(value){
if(value.setup.toLowerCase().includes(search.toLowerCase())) {
return jokes;
}
})
}
return jokes;
}
},
};
</script>
Thank you for any assistance!