Vue - 父級上的深層嵌套對象訪問圖像

Question

我有 2 個 V-for 來渲染嵌套對象。 在對象的第二層，我有一個圖像，但我需要在我的第一個 V-for 上渲染該圖像。

  <div v-for="(fruit, key) in fruits" :key="key">
        <div>
            <img :src="IWantRenderImageHereFrom2ndVfor" alt="" />
            <h1>{{ fruit }}</h1>
        </div>

        <div v-for="(piece, key) in fruit" :key="key">
            <h2>{{ key }}</h2>
        </div>
    </div>

這是我的對象的結構方式

   const fruits = {
    apple: {
        green: {
            image: image1,
            name: "green"
        },
        yellow: {
            image: image1,
            name: "yellow"
        }
    },
    mango: {
        red: {
            image: image2,
            name: "red"
        },
        pink: {
            image: image2,
            name: "pink"
        }
    }
};

每個 2 級對象將具有與我想在 1 級對象上渲染的圖像相同的圖像。 我已經嘗試抓取圖像並在第一級創建一個新鍵，但是當循環渲染第二級時，它拋出了一個錯誤

Answer 1

如果圖像不是顏色對象所獨有的，那么將其存儲在那里是沒有意義的，而重復則表明它是不對的。 您可以改用這樣的結構，其中圖像是第一級的屬性：

const fruits = {
    apple: {
        image: "https://via.placeholder.com/200/333333",
        colors: ['green', 'yellow']
    },
    mango: {
        image: "https://via.placeholder.com/200/999999",
        colors: ['red', 'pink']
    },
};

您可以用一個簡單的數組替換顏色對象。 模板變為：

<div id="app">
  <div v-for="(fruit, key) in fruits" :key="key">
    <div>
      <img :src="fruit.image" alt="" />
      <h1>{{ key }}</h1>
    </div>

    <div v-for="color in fruit.colors" :key="color">
      <h2>{{ color }}</h2>
    </div>
  </div>
</div>

這是一個演示：

 const fruits = { apple: { image: "https://via.placeholder.com/200/333333", colors: ['green', 'yellow'] }, mango: { image: "https://via.placeholder.com/200/999999/FFFFFF", colors: ['red', 'pink'] }, }; new Vue({ el: "#app", data() { return { fruits } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(fruit, key) in fruits" :key="key"> <div> <img :src="fruit.image" alt="" /> <h1>{{ key }}</h1> </div> <div v-for="color in fruit.colors" :key="color"> <h2>{{ color }}</h2> </div> </div> </div>