使用 VueJS 獲取嵌套的 JSON 數據

Question

我想使用 VueJS 獲取嵌套的 JSON 數據，但我無法理解如何做到這一點（我是 VueJS 的新手）。 數據如下：

{
"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",
            }, 

我當前的 vueJS 代碼嘗試如下：

<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);
}

},

我想從鍵中獲取數據：“title”：“2000/06/18”：“zero_date”並將其綁定到“input”標簽。 謝謝！

Answer 1

這有幫助嗎？ “ zero_date ”中的properties可以有多個項目嗎？

{
    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
        }
    }
}