I feel like this is a somewhat specific question that I can't find the answer anywhere. Perhaps there's something I'm missing about Vue.JS that can solve this issue for me.
I'm looking to create a small single page application that changes screens dynamically using parameters. In theory, the app should be dynamic and I should be able to update the Database without touching the Vue.js app.
I have a small JSON database with an array of information on it.
["mary","john","alice"]
On a children component using the lifecycle hook beforeMount() I'm retrieving this information and placing it into an array on Data.
data() {
return {
names: [],
}
},
/*...*/
beforeMount() {
var namesDB = require('../assets/db/names.json');
this.names = names;
}
With that array, I'm creating a few buttons
<button v-for="name in names">{{ name }}</button>
This creates a button for each name fine without issues.
What I'm looking to do now, is to be able to send the retrieved name ({{ name }}) to a function on methods. The purpose later is to send this to the parent app to change the screen for the desired person, but for now, it's something simple like this:
methods: {
say(nameParam) {
console.log(nameParam);
},
},
I thought of doing something like the following:
<button v-for="name in names" @click="say('{{ name }}')">{{ name }}</button>
However, I found this doesn't work, as the console returns: {{ name }}.
How can I send this type of computed data as a parameter, and furthermore, how can I use the computed data for the parent component to change the screen of the application? (say, I want to use the name to check for a specific person).
