如何在vue.js 2中顯示對象的值？

Question

我的代碼是這樣的：

<script>
    export default {
        props:['search','category','shop'],
        created(){
            ...
        },
        data(){
            return{
                loading:false
            }
        },
        computed:{
            ...
            list:function(){
                console.log(this.$store.state.product);
                return this.$store.state.product.list
            },
        },
        methods:{
            ...
        }
    }
</script>

我做了： console.log(this.$store.state.product); 列表方法

然后，我在控制台上檢查

結果是這樣的：

我想要顯示名稱的值

我這樣嘗試：

console.log(this.$store.state.product.list.id.name);

存在錯誤：

未捕獲的TypeError：無法讀取未定義的屬性“名稱”

我該如何解決錯誤？

Answer 1

該list是一個對象，鍵是不同元素的ID-您當前正在嘗試像這樣訪問：

this.$store.state.product.list.id.name

因為列表對象中沒有id鍵，所以出現了此錯誤，您需要將.id替換為實際的id值，如下所示：

this.$store.state.product.list["12"].name; //"Bunga Gandeng"