Shopware 6 custom product fields in tabs

Question

I am completely new to the the Shopware (6) community and I am still learning how to code in Symfony and Vue.js.

After trying some how to's in the developer wiki, I wanted to try some coding by myself.

I would like to combine https://docs.shopware.com/en/shopware-platform-dev-en/how-to/add-admin-new-field and https://docs.shopware.com/en/shopware-platform-dev-en/how-to/new-tab-admin?category=shopware-platform-dev-en/how-to into one functionallity (Product tabs with custom admin fields).

However, when I use the v-model attribute into an input field, the complete tab will turn white and the following error is outputted in the console: product is not defined.

My guess is that the model needs to be imported into the module (I can't find this anywhere into the docs).

Can someone tell me what I have to do to make this work? My current source code can be found here: https://github.com/Millerdigital-matthew/miller-product-upsells

Answer 1

As I understand, you need to change your index.js as follows:

const { Component } = Shopware;
const { mapState } = Component.getComponentHelper();

Component.register('...', {
    computed: {
        ...mapState('swProductDetail', [
            'product'
        ]),
    }
});