Custom block with a dropdown

[zoinkydoink]

I have tried to create a block for displaying different ads, one block with different options
I have the following

AdBlock.cs

[BlockType(Name = "Ad", Category = "Content",
        Icon = "fas fa-adn", Component = "ad-block")]
    public class AdBlock : Block
    {
        /// <summary>
        /// Gets/sets the text body.
        /// </summary>
        public StringField AdPosition { get; set; }
    }

adblock.js

Vue.component("ad-block", {
    props: ["uid", "toolbar", "model"],
    methods: {
        onBlur: function (e) {
            console.log("target is" + e.target);
            this.model.adPosition.value = e.target.value;
        }
    },
    computed: {
        isEmpty: function () {
            return piranha.utils.isEmptyText(this.model.adPosition.value);
        }
    },
    template:
        "<div class='block-body' :class='{ empty: isEmpty }'>" +
        "  <select v-model='selectedOption'>" +
        "    <option v-for='option in options' :key='option.value' :value='option.value'>{{ option.label }}</option>" +
        "  </select>" +
        
        "</div>",
    data() {
        return {
            selectedOption: "",
            options: [
                { label: "Option 1", value: "option1" },
                { label: "Option 2", value: "option2" },
                { label: "Option 3", value: "option3" },
                { label: "Option 4", value: "option4" }
            ]
        };
    }
});

added the adblock.js to the init

app.UsePiranha(options =>
{
    // Initialize Piranha
    App.Init(options.Api);
    
    App.Modules.Manager().Scripts.Add("~/assets/js/adblock.js");
    App.Blocks.Register<AdBlock>();

  ---
});

AdBlock.cshtml

@using something.admanager
@inject AdManager AdManager
@model mynamespace.Views.Cms.CustomBlocks.AdBlock

ad position @Model.AdPosition
<br/>
@Html.Raw(AdManager.GetAdContent(Positions.TopLeft)) //should get from whats selected to replace Positions.TopLeft

Seems everything is working with the exception of the value of the dropdown not being passed, and when I view the component in manager, when i set a value from dropdown, save/publish, reload the same page in manager, its not retaining the value in the dropdown, i think my problem is in the vue component, but not sure if that is all

I simply want to retain the value so I can use it in the component

On a different note, am i going about this the right way if i want to create a reusable ad component that will render different text (from a service) based on whats selected in the dropdown or is there a better way to do this that I am not aware of?

Thank you

[Håkan Edling]

Sorry for the late response. Just looking at the code I'm guessing the error is that you update the model value in onBlur but I can't see you actually assigning the event anywhere. As a side note there is a built in dropdown field (SelectField<T>) you can use that populates its values from an enum as well.

https://piranhacms.org/docs/master/content/fields

Best regards