vue.js - 'view' 在 Vue 中未定义

Question

这可能是一个简单的解决方法，但我一直在努力尝试定义“视图”和“产品”道具，“产品”（应该是带有数据的对象）和“视图”道具都被返回为未定义，但在 Chrome 中 Vue 的“事件”选项卡中，我可以看到数据正在通过有效负载作为所有正确数据的对象传入。

所以我有一个填充了数据的表，每一行都有一个 ID，一旦选择应该带你到编辑页面，你可以在下面看到，数据正在被提取但没有填充表单并且想知道我哪里出错了有了这个？

这是表格：

<template>
<div class="main-section">
<div class="details-form">
    <div class="details-form">
        <div>
            <label>Details:</label>
        </div>

        <div id="productPriority">
            <label for="productPriority">Priority: </label>
            <input id="productPriority" v-model="order" type="number" title="Product Priority" name="productPriority" placeholder="Please enter the product priority" required>
        </div>

        </div>
</div>
</div>
</template>

<script>
import {event} from '@/services';
import {http} from '@/services';
import {productStore} from '@/stores';

export default {
    name: "ProductDetails",

    props:['product', 'view'],

    data(){
        return{
            order:'',
            description:'',
            url: '',
            image_id: '',
        }
    },


    watch:{

        view() {
            if(this.view === 'product-details') {
                this.order = this.product[0].attributes.order;
                this.description = this.product[0].attributes.description;
                this.url = this.product[0].attributes.url;
                this.image_id = this.product[0].attributes.image_id;
            }
        },


        product: {
            hander: function() {

             if((this.product.length > 1) &&( this.product.attributes === "product")) {
                this.order = this.product.attributes.order;
                this.description = this.product.attributes.description;
                this.url = this.product.attributes.url;
                this.image_id = this.product.attributes.image_id;
            }

        }
        }
    }
}
</script>

我试图传递的数据示例：

"type": "product",
  "id": "1",
  "attributes": {
    "image_id": 1,
    "order": 1,
    "description": "abc",
    "url": "http://testingurl1.com"

加载该部分的视图页面：

<product-badge-details v-show="subview === 'product-badge-details'" :product="product"/>

<script>
import {productStore} from '@/stores';
'@/components/products/ProductBadge';

export default {
    components: {ProductDetails},

    props:['subview', 'product'],

    data() {
        return {
            state: productStore.state,

        }
    },
}
</script>

标签： vue.jsvue-component