Announcement

Collapse
No announcement yet.

How to specify propsData in Vue

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • alex4998
    started a topic How to specify propsData in Vue

    How to specify propsData in Vue

    I tried a few different ways to specify propsData in Vue components but still unsuccessful. My goal is to specify props values when a Vue component is instantiated. One of the obvious way to do it is to assign propsData in the VueComponent constructor. When I do this Vue does not take the values anyway. It looks like it still tries to take values from the component declaration. What am I missing here?

    var asComponent = new ConfigurationMainPageComponent<RingModel>(new ConfigurationMainPageComponentProperties()
    {
    SearchEntityUrl = "Ring/GetAvailableRingsAsync?ringname={0}",
    DeleteEntityUrl = "Ring/DeleteRingAsync",
    AddEntityUrl = "/Configuration/Ring/AddRing",
    ItemName = "Ring"
    }).AsComponent();

    then it is assigned like this in the constructor

    public ConfigurationMainPageComponent(ConfigurationMainPa geComponentProperties properties)
    {
    propsData = properties.As<IObject>();
    template = $@"#{nameof(ConfigurationMainPageComponent<TItemMo del>)}";
    data = () =>
    {
    return new ServiceConfigurationModel<TItemModel>
    {
    ResultList = new TItemModel[0][],
    SearchText = String.Empty,
    NoValues = false,
    NRows = 5,
    SelectedValue = new int[0],
    ShowPopup = false,
    Message = String.Empty,
    IsFailure = false
    };
    };

    components = new componentsConfig
    {
    [nameof(MessagePopupComponent)] = new MessagePopupComponent().AsComponent()
    };
    mounted = Search;
    }

    I looked at the Vue source and it looks like if I could assign vm.$options.propsData directly instead of the propsData property in the constructor that would work but I cannot figure out the relations between objects and the order of calls. Where is that place to specify vm.$options.propsData? However I'm not sure that's help.

    Thank you

  • alex4998
    replied
    Yes, this is what I started from. The demo is very basic. This question is rather advanced. I found sort a workaround and gained better understanding of the bond between bridge.net and vue. It looks like all properties, all methods that I declare in the object inherited from VueComponent then exposed via vm.$options property. That was enough for me. The question was about propsData because I wanted to pre-fill them when an instance is created and then use them in the view. The possibility of that was described on the Vue web site but I found even better solution for bridge.net + vue. I added

    protected static extern VueComponent<TModel, TProps> Options { [Template("this.$options")] get; }

    to the VueComponent and then used it like this in the view

    <div class="col-lg-10">
    <p class="serviceConfigurationHeading">{{Options.ItemName}} Configuration</p>

    or like this in the code-behind

    Options.As<ConfigurationMainPageComponent<TItemMod el>>().ItemName

    Alex

    Leave a comment:


  • geoffrey.mcgill
    replied
    Did you review the Retyped Vue demo?
    https://demos.retyped.com/dist/vue/

    There might be some helpful techniques in that demo.

    Leave a comment:


  • alex4998
    replied
    I cannot understand where is the right place for it. $options is not available at the constructor. Of course the Vue component is not created yet, the constructor is technically where the "options" are created. There is propsData on that object. I tried to assign that in the constructor as you can see but Vue framework didn't take that object. If I try to debug Vue code, I cannot even find where it uses currently populated propsData, it always tries to create a new one from the HTML.

    Leave a comment:


  • samuelgrahame
    replied
    can you assign the propsData, with this:

    // example
    new {
     prop1 = "Hello World",
     prop2 = "hello World 2"
    }
    based off: https://vuejs.org/v2/guide/components-props.html

    you could just write:

     
     /*@ vm.$options.propsData = x;           */

    Leave a comment:

Working...
X