Skip to content

Instantly share code, notes, and snippets.

@paulocoghi
Last active March 28, 2018 15:33
Show Gist options
  • Save paulocoghi/e154c3e2f38ef474e7d50f1178f7b5e6 to your computer and use it in GitHub Desktop.
Save paulocoghi/e154c3e2f38ef474e7d50f1178f7b5e6 to your computer and use it in GitHub Desktop.
Multiple components and store variables ($)

Multiple components and store variables ($)

Just trying (and failing) to work with Svelte's store variables with multiple components.

<InputAdd></InputAdd>
<List></List>
<script>
import InputAdd from './InputAdd.html'
import List from './List.html'
import { Store } from 'svelte/store.js';
const store = new Store( { todos: [ 'Item 1', 'Item 2' ] }, );
export default {
components: {
InputAdd,
List,
},
store: () => store
};
window.store = store;
</script>
<input bind:value='newTodo' placeholder='buy milk'>
<button on:click='push("$todos", newTodo)'>add todo</button>
<script>
import { push } from 'svelte-extras';
export default {
data: function () {
return {
newTodo: ''
};
},
methods: {
push
},
store: () => window.store
};
</script>
<ul>
{{#each $todos as todo, i}}
<li>
<button on:click='splice("$todos", i, 1)'>x</button>
{{todo}}
</li>
{{/each}}
</ul>
<style>
ul {
list-style: none;
padding: 0;
}
li button {
color: rgb(200,0,0);
background: rgba(200,0,0,0.1);
border-color: rgba(200,0,0,0.2);
padding: 0.2em 0.5em;
}
</style>
<script>
import { splice } from 'svelte-extras';
export default {
methods: {
splice
},
store: () => window.store
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment