Repopulate options in ui-kit-component

Kirby 3 Questions 🤔
1

I have a select-field plugin with a variable that populate the options. Now i want to update the options with a new array of values by a click on a button, but this doesn’t seem to work:

Here is a simplified version of what i’m trying to do.

  {{myList}}

<k-select-field :label="label" type="select" theme="field" :options="myList" :value="value" @input="onInput">

// php

'computed' => [   
    'myList' => function(){
      initvals = [
        { value: 'a', text: 'Init value A' },
        { value: 'b', text: 'Init value B' }
      ]
      return initvals();
    }
    ... 
    // this works

//js

   function update(){
      console.log("update me");
      this.myList = [
        { value: 'c', text: 'New value C' },
        { value: 'd', text: 'New value D' }
      ]
      console.log(myList); 
      // nothing is updated in the component, but the variable is updated -> {{myList}}
   }

Anyone any idea how to get this working?

Any hints are appreciated!

thanks!

2

You are replacing the whole array and that makes it difficult for vue to detect it as a change, I guess. Read about it here:

Edit: I think my initial idea was wrong…technically it should work. Can you show us the whole vue component code?

3

Here it is:

index.php

<?php
Kirby::plugin('custom/attendeetypesregdeadline', [
    'fields' => [
        'attendeetypesregdeadline' => [
            'props' => [
                'endpoints' => function($endpoints=""){
                  return $endpoints;
                },
                'message' => function( $message =""){
                    return $message;   
                }              
                 
            ],
            'computed' => [   
                'options' => function(){
                   $currentpage= $this->model();
                   $eventpage=$currentpage->parent()->parent();
                   $currentmemberid=$currentpage->attendeetype()->value();
                    $temp=[];
                    $attendeetypes=$eventpage->attendeetypes();
                    foreach($attendeetypes->toStructure() as $attendeetype){
                      if($attendeetype->autoid()->value() == $currentmemberid){
                        foreach($attendeetype->registrationdeadlines()->toStructure() as $regdeadline){
                            $ob=[
                              "text" => $regdeadline->name()->value(). ' (€ '. $regdeadline->price()->value().')', 
                              "value" => $regdeadline->codename()->value()                                                      
                          ];
                          $temp[]=$ob;                           
                        }
                      }
                    }                   
                    return $temp;                        
                }               
            ],
            
            'api' => function() {
                return [
                    
                    [
                     'pattern' => 'updateme',
                        'method' => 'POST',
                        'action' => function () {
                          $currentpage=$this->field()->model();
                          $eventpage=$currentpage->parent()->parent();
                          $currentmemberid=$currentpage->attendeetype()->value();
                          $temp=[];
                          $attendeetypes=$eventpage->attendeetypes();
                          foreach($attendeetypes->toStructure() as $attendeetype){  
                            if($attendeetype->autoid()->value() == $currentmemberid){
                              foreach($attendeetype->registrationdeadlines()->toStructure() as $regdeadline){
                                  $ob=[
                                    "text" => $regdeadline->name()->value(). ' (€ '. $regdeadline->price()->value().')', 
                                    "value" => $regdeadline->codename()->value()                                                      
                                ];
                                $temp[]=$ob;                                   
                              }
                            }
                          }
                          return ['status' => 'success', 'options'=>$temp];
                        }
                    ]
                     
                ];
            },
        ]
    ]
]);

index.js

panel.plugin('custom/attendeetypesregdeadline', {
    fields: {
        'attendeetypesregdeadline': {     
            props: {
                endpoints: Object, 
                message: String,
                options: Array,
                value: String,
                label: String     
            },
            
            mounted(){
              this.$events.$on("model.update", this.updateme);
            },           
            destroyed: function(){              
              this.$events.$off("model.update", this.updateme);
            }, 
            methods: {
              updateme(){
                 $me= this;
                 this.$api.post(this.endpoints.field + '/updateme')
                  .then(function(response) {
                    console.log("succes" + response.options);                     
                    $me.options=  response.options;                       
                  })
                  .catch(function(error) {
                      // do something
                      console.log(error);
                     
                  });
              },
              onInput(value){                
                this.$emit("input",value);
              }              
            },
            template: `
            <section>       
              <k-select-field :label="label" type="select" theme="field" :options="options" :value="value" @input="onInput">                             
            </section>
            `
        }
    } 
});