定义的数组变量工作正常，但子元素在 vuejs 中不起作用

Question

在 Vuejs 中遇到一个奇怪的问题。我正在使用 firestore 使用道具作为单张帖子的 id 来获取数据... 现在形成的数组很好..正如您在屏幕截图中看到的...控制台中没有错误，我看到了数据...但它不适用于其子关键元素..附上另一个code.i屏幕截图猜猜 {{temple}} 是否正常工作，那么 {{temple.templename}} 也应该正常工作

<div class="appCapsule">
{{temple}}
         <div class="section mt-2">
            <div class="card text-center">
                <div class="card-header">
                    {{temple.templename}}
                </div>
                <div class="card-body">
                    <img v-bind:src="'https://awesong.in/jain/storage/temples/' + temple.fileToUpload1" style="width:100%">

                    <p class="card-text">Temple Type : {{temple.templetype}}</p>
                    <p class="card-text">Near By City : {{temple.nearbycity}}</p>
                    <p class="card-text">Built in : {{temple.built}}</p>
                    <p class="card-text">Address : {{temple.address}}</p>
                    <p class="card-text">Location : {{temple.location}}</p>
                    <p class="card-text">District : {{temple.district}}</p>
                    <p class="card-text">State : {{temple.state}}</p>
                    <p class="card-text">Phone : {{temple.phone}}</p>
                    <p class="card-text">Email : {{temple.email}}</p>
                    <p class="card-text">Website : {{temple.website}}</p>
                    <p class="card-text">Views : {{temple.clicks}}</p>


                </div>

            </div>
        </div>


    </div>

Image attached for reference

Answer 1

Temple 是一个 JSON 对象数组。你可以使用temple[0].property，或者你可以循环它：

<div v-for="t in temple" :key="JSON.stringify(t)">
     {{t.templename}} // etc
</div>