我正在嘗試制作一個圖示組件，該組件加載到一個 js 檔案中，該檔案包含一個物件陣列，其中包含 svg 值。
我的圖示組件如下所示：
<template>
<div class="icon"></div>
</template>
<script>
import icons from "~/assets/icons.js"
export default {
mounted() {
console.log(icons)
}
}
</script>我的 icons.js 看起來像這樣：
[
{
circle: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<circle id="Ellipse_1" data-name="Ellipse 1" cx="25" cy="25" r="25" fill="red"/>
</svg>`,
},
{
square: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<rect id="Rectangle_1" data-name="Rectangle 1" width="50" height="50" fill="#02f"/>
</svg>`,
},
{
triangle: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<path id="Polygon_1" data-name="Polygon 1" d="M25,0,50,50H0Z" fill="#00ff3c"/>
</svg>`,
},
]當我嘗試使用 console.log 讀取圖示時，它回傳一個空物件。我試過改變我的icons.js，看看是不是因為這些事情：``
但即使我把它改成這個，它也會回傳一個空物件：
[
{name: "foo"},
{name: "bar"}
]我的專案是新制作的，除此之外沒有其他內容，是否有可能我在創建nuxt專案時選擇了錯誤的設定？還是我看錯了？
uj5u.com熱心網友回復：
您需要匯出資料。順便說一句，我看不出有任何理由在你的情況下使用陣列。看起來您的資料應該是這樣的物件：
export default {
circle: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<circle id="Ellipse_1" data-name="Ellipse 1" cx="25" cy="25" r="25" fill="red"/>
</svg>`,
square: `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<rect id="Rectangle_1" data-name="Rectangle 1" width="50" height="50" fill="#02f"/>
</svg>`,
}
//Then import like
import icons from "~/assets/icons.js"
// use it like
icons.circle
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/414827.html
標籤：