Binding options to radio field in custom panel section

Kirby 3 Questions 🤔
1

I’m trying to bind options to a radio-field in a custom panel section like this. But it doesn’t work. Anyone an idea what i’m doing wrong?

PHP

'computed' => [
    'options' => function(){                  
        $arr=[];
        $arr[]=['value'=>'a', 'text'=> 'Option A'];
        $arr[]=['value'=>'b', 'text'=> 'Option b'];
        return $arr;
    }
    ....

JS

template: `
    <section class="k-dbusers-section">
        <k-radio-field  
            :options="options"
            name="radio"
            type="radio"
            @input="input"
        />
    </section>
 `
2

Maybe someone can help if you provide a bit more information.

  • Any console Outputs?
  • Are the options fetched from the Panel?
  • Are they available in your custom section?
3

The options are generated in the computed section in my index.php file.
I can see the variables in my template when i bind them with a text-field

<k-text v-html="options"> </k-text>

shows me this result:

[ { "value": "a", "text": "Option A" }, { "value": "b", "text": "Option b" } ]

But i’m not able to bind them with the radiofield as it is shown in the tutorial. When i put the options like this, i get a good result.

 <k-radio-field  
    :options="[
      { value: 'a', text: 'Option A' },
      { value: 'b', text: 'Option B' }
     ]"
     name="radio"
     type="radio"
    @input="input"
/>

but no result when i try to bind it with a dynamic array of objects

<k-radio-field             
    :options="options"
    name="radio"
    type="radio"
    @input="input"
 />
4

If you can see your data like this in the text field it seems to be a string.
Try to run it through JSON.parse() when you fetch it.

5

Hi,
Still not working.
I must be doing something wrong but I don’t know what :thinking:

panel.plugin('custom/dbusers', {
  sections: {
    dbusers: {
      data: function () {
        return {         
          options:null
        }
      },
      created: function() {
        this.load().then(response => { 
          this.options  = JSON.parse(response.options);
        });
      },
      ...
6

Ok I was wrong, the options received in the panel are already in json format. You can remove JSON.parse()

Try this:

<k-radio-field  v-if="options"
   :options="options"
   name="radio"
   type="radio"
/>
7

Great! this works!
Thanks

8

Hi,
i have another question on this.

I want to change the “options” variable with a click on a button that calls the function showPage().
This function does an api call that returns a variable but the radio-field is not adjusted when i change the variable.
I’m i doing something wrong on this?

JS

showPage($pagenum){       
  $data={pagenum:$pagenum};
  $me=this;
  this.$api.post('getPage',$data)             
  .then(function(response) {
    if(response["status"]=="success"){
      console.log("success");  // this returns "success"
      $me.options=response["options"];  // doesn't work for me
    }
  })
  .catch(function(error) {
  });
}

PHP

<?php
Kirby::plugin('custom/dbusers', [
  'api' => [
    'routes' => [
      [
        'pattern' => 'getPage',
        'method' => 'POST',
        'action'  => function () { 
          $pagenum=get("pagenum");
          $start=$pagenum;
          $end=$start + 500;
          $users=db::select('tbl_login','*',null,'loginEmail ASC',$start,$end);
          
          $arr=[];
          foreach ($users as $user) {
            $ob=[
                'text' => $user->loginEmail(), 
                'value' => $user->loginId()                       
            ];
            $arr[]=$ob;
          }
         
          return[
              'options' => $arr ,
              'status' => "success"
          ];
        }
      ],
      ....