Use getFormFields to render select field will cause Vue.js error

[yanhao-li]

For example, if there is a select field named with "select_option_1" on the form, and when I'm trying to render the form using getFormFields as following

    public function getFormFields($user) {
        $fields = parent::getFormFields($user);
        $fields["select_option_1"] = "option_value";
        return $fields;
    }

This will trigger the javascript error:

edit:337 Uncaught ReferenceError: option_value is not defined

I noticed that "option_value" doesn't be treated as a string type when it was being pushed in Vuex.

    window.STORE.form.fields.push({
    name: 'select_option_1',
    value:  option_value       // WRONG, should be "option_value"
    })

I believe the problem is caused by the logic existed in _selector_input_store.blade.php file.

window.STORE.form.fields.push({
    name: '{{ $name }}',
    value: @if(isset($item) && is_numeric($item->$name)) {{ $item->$name }}
           @elseif(isset($item->$name)) {!! json_encode($item->$name) !!}
           @elseif(isset($formFieldsValue))
                @if (is_array($formFieldsValue))
                    @php
                        $formFieldsValue = array_first($formFieldsValue, null, '');
                    @endphp
                @endif
                @if (is_numeric($formFieldsValue)) {{ $formFieldsValue }}
                @else {!! $formFieldsValue !!}
                @endif
           @else
            ''
           @endif
})

The $formFieldsValue has been unescaped in the end, is this a bug or a feature?

A temporary possible workaround for this issue might be:

    public function getFormFields($user) {
        $fields = parent::getFormFields($user);
        $fields['select_option_1'] = "'" . $option_value . "'";
        return $fields;
    }