Vue on a rewrite of an older Project v8 > v9

So i am angrily rewriting some older Project to upgrade to v9/php8 and it uses Blocks with repeatable contents (testimonials with Images, quotes and so on).

When i load an existing Block with 3 testimonials, i cast the FileBrowser like so:

Concrete.Vue.activateContext('cms', function(Vue, config) {
    new Vue({el: '#' + ftImageImage.attr('id'), components: config.components});
})

where “ftImageImage.attr(‘id’)” gives me the id of the element for each run in the loop over all testimonials.
Html looks like this:

<div
  id="image-{{id}}"
  class="ccm-file-selector ft-image-image-file-selector"
>
  <concrete-file-input
    :filters='<?=json_encode([['field' => 'type', 'type' => \Concrete\Core\File\Type\Type::T_IMAGE,]])?>'
    :file-id="{{ image }}"
    choose-text="<?=h(t('Choose Image'))?>"
    input-name="<?php echo $view->field('highlights'); ?>[{{id}}][image]"
  >
  </concrete-file-input>
</div>

(handlebars template)

Now while that works, if i add a new testimonial (a new repeatable entry) and run the same Method again, the fileSelector does not show up. I can manually trigger the Vue call and it does not throw an error, the vars are all present and all it does is strip the whole Html out and leaves me with nothing.

Anyone has an idea? I do not get what is the difference between the initial call and the later call after adding a new repeatable entry.

thanks in advance

I got the solution for this. The :file-id attribute of <concrete-file-input> can not be emptyString, it has to be 0 for a new entry (where no file is selected). So with handlebars i registered a ternary helper and it looks like this now:

<concrete-file-input
    :filters='<?=json_encode([['field' => 'type', 'type' => \Concrete\Core\File\Type\Type::T_IMAGE,]])?>'
    :file-id="{{ ternary image image 0 }}"
    choose-text="<?=h(t('Choose Image'))?>"
    input-name="<?php echo $view->field('highlights'); ?>[{{id}}][image]"
  >
  </concrete-file-input>

So if i create a new repeatable from the template, the file-id is set to 0 instead of empty and that works.

Still appreciate some links to documentation…

1 Like