Why is only number or json passed to vue component?

Question

Vue.js

I'll start with the code, the blade templating engine:

<single-news
                    :news="{{ json_encode($news) }}"
                    :url="123"
            ></single-news>

The second url parameter passes only numbers and json, if you pass any string - it will be undefined, if the php function is any other than json_encode - the script will crash and display nothing at all.
Here is the component code:

export default {
        props: [
            'news',
            'url'
        ],
        mounted() {
            console.log('Check: ' + this.url);
        }
    }

Why is this happening? I need to pass a string to url

Answer 1

Why is this happening?

Because you are using dynamic data transfer. Accordingly, the passed string is either treated as the name of a property of the current component, or is incorrect garbage. Hence undefined (there is no property) and "the script will crash" (due to the garbage value of the parameter, the template could not be compiled).
Well, numbers and json, they are correct expressions: a number is a number, and json is treated as an object/array literal.
Pass a static value, or wrap the value in quotes.

Answer 2

:url=" 'stroka' "

spoiler

spangebob_raibow.jpg