Vue.js变量在基础模态内失去作用域

Question

在下面的第一个开始和最后一个结束的v-for标签中，我有以下<div>循环。

第一个:src能够通过Vue.js变量解析文件名。

第二个:src（第12行）无法将变量解析为字符串，浏览器而是搜索名为'https://sample.com/' + orderInfo[product].FileName[index]的文件，该文件不存在。

为什么浏览器无法解释/解析模式内的变量名，即使它们似乎在v-for循环的范围内。

<div v-for="index in orderInfo[product]" :key="index">
    <img :src="'https://sample.com/' + orderInfo[product].FileName[index]"/>

    <div class="file-detail">
        <a data-open="modal"></a>
    </div>

    <div class="reveal large" id="exampleModal1hello" data-reveal>
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">Close X</span>
        </button>
        <img :src="'https://sample.com/' + orderInfo[product].FileName[index]"/>
    </div>
</div>