SvelteJS: Passing data to components

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

1 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");


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy