SvelteJS: Passing data to components

Question

I´m currently migrating a Laravel app that uses VueJS to SvelteJS (replace the Vue part with Svelte).

With VueJS I can send props to components mounted on the page easily:

<users :name="John Doe"></users>

Then later access the name prop in the component.

In Svelte I´m only able to pass props and access them in the component when they´re nested.

App Component: I can reference the user component and send props

<h1>Hello {name} - { count }</h1>

<h1>Employees of VONIDI</h1>

<Users villain="Jean Claude Van Damme" hero={employees} />

<ul>
    {#each employees as employee}
        <li><a target="_blank" href={employee}>{employee}</a></li>
    {:else}
        <li>No employee :(</li>
    {/each}
</ul>

<form on:submit="processForm(event)">
    <input bind:value=form.name type=text>
    <input ref:date id="date" bind:value=form.date type=text>
    <label>
        <input type='checkbox' bind:group='form.colours' value='red'>
        red
    </label>

    <label>
        <input type='checkbox' bind:group='form.colours' value='blue'>
        blue
    </label>

    <button type=submit>Say hello</button>
</form>

<button on:click="set({ count: count + 1 })"> +1 </button>
<button on:click="set({ count: count - 1 })"> -1 </button>

<style>
    h1 {
        color: purple;
    }
</style>

<script type="text/javascript">
import axios from 'axios';
import flatpickr from 'flatpickr';
import "flatpickr/dist/themes/dark.css";


    export default {

        components: {
            Users: './users.svelte'
        },

        data() {
            return {
                count: 0,
                name: 'WORLD',
                employees: [],
                form: {
                    name: '',
                    colours: [],
                    date: ''
                }
            };
        },

        oncreate() {
            console.log('Created TAG!');
            this.loadStudents();
            console.log(this.options);

            flatpickr('#date', {
                mode: "range",
                minDate: "today",
                dateFormat: "Y-m-d",
                disable: [
                    function(date) {
                        // disable every multiple of 8
                        return !(date.getDate() % 8);
                    }
                ]
            });
        },

        methods: {
            getStudents() {
                return axios.get('/employees');
            },

           async loadStudents() {
                let response = await this.getStudents();
                this.set({
                    employees: response.data
                });

                const emp = this.get();

                console.log(emp);
            },

            processForm(event) {
                event.preventDefault();

                const tagline = this.get();
                console.log(tagline);
                alert(`Hello ${tagline.form.name}!`);
            }
        }
    };
</script>

User Component:

<h4>Employees from User Tag: {hero}</h4>
<h2>Villain: { villain }</h2>

<script>
    export default {
        tag: 'users-tag',

        oncreate() {
            console.log('User component created!')
            console.log( this.get() )
        }
    };
</script>

But I can't figure out how to send props to components that aren't nested, ie: In a stand-alone user component, I´m unable to send props.

<users villain="Jean Claude Van Damme" hero="One"></users>

I always get an undefined error for the prop value. Any ideas on how I can achieve this?

Thanks

Answer 1

If I understand correctly, you are trying to modify data within a component after it is initialized.

When you initialize the component you do something like:
var mything= new Thing({
  target: someplace,
  data: {text:"some text",status:" works good"}
});

Later on if you need to change the data you can do:

mything.set({text:"new text");