I want to get a nested JSON data using VueJS, but I'm having trouble understanding how to do that (I'm new to VueJS). The data is as follows:
{
"title": "Editor",
"key": "Editor_one",
"attributes": {
"holder",
},
"properties": [
{
"title": "Date :",
"attributes": {
"Path": "0/9",
}
},
{
"title": "2000/06/17",
"key": "date_ident",
"attributes": {
"Path": "0/10",
}
},
{
"key": "zero_vector",
"attributes": {
"Path": "0/11",
},
"properties": [
{
"title": "File",
"attributes": {
"Path": "0/11/0",
},
},
{
"key": "zero_date",
"attributes": {
"Path": "0/17",
},
"properties": [
{
"title": "2000/06/18",
},
My current vueJS code attempt is as follows:
<div v-for="editDate in vectors.slice(0,1)" v-bind:key="editDate.id" >
<div v-if="editDate.title = '2000/06/2018'">
<label style="margin-right: 10px" v-bind="response">{{editDate.title}}</label>
<input
type="text"
v-model="date"
name="date"
placeholder="Add Date"
/>
</div>
async created() {
try {
const response = await axios.get('http://localhost:8080/');
this.vectors = response.data.properties; //assign data from response to 'vectors'
} catch (e){
console.error(e);
}
},
I want to get the data: "title": "2000/06/18" from the key: "zero_date" and bind it to the 'input' tag. Thanks!
CodePudding user response:
Does that help? Can properties
inside "zero_date" have more than one item?
{
async created() {
try {
const response = await axios.get('http://localhost:8080/');
this.vectors = response.data.properties; //assign data from response to 'vectors'
} catch (e){
console.error(e);
}
},
computed: {
zeroDate: {
get() {
return this.vectors.find(vector => vector.key === 'zero_date').properties[0].title
},
set(newValue) {
this.vectors.find(vector => vector.key === 'zero_date').properties[0].title = newValue
}
}
}
}