Getting Nested JSON data using VueJS

Question

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" class="row-control">
<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!

Answer 1

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() {
            return this.vectors.find(vector => vector.key === 'zero_date').properties[0].title
        }
    }
}