I'm having trouble with the polymer in my elements here is my code:
<dom-module id="bb-account-settings">
<template>
<style is="custom-style" include="shared-styles"></style>
<div class="settings-dialog">
<div class="frame">
<div class="horizontal layout">
<div>
<div class="user-image"></div>
</div>
<div class="horizontal layout">
<paper-input label="First Name" value="{{fNameSet}}"></paper-input>
      
<paper-input label="Last Name" value="{{lNameSet}}"></paper-input>
</div>
<paper-input label="Email" value="{{emailSet}}"></paper-input>
</div>
<paper-input label="Phone number" value="{{phoneSet}}" allowed-pattern="[0-9]"></paper-input>
</div>
</div>
</template>
<script>
Polymer({
is: 'bb-account-settings'
});
</script>
<script>
this.lNameSet = 'test last name'
var userId = firebase.auth().currentUser.uid;
firebase.database().ref('/user/' + userId + '/UserInfo').once('value').then(function(snapshot) {
this.fNameSet = snapshot.val().fName;
});
</script>
</dom-module>
As you well think, the first name filed is supposed to be data from firebase and the last name - 'test last name'.
But non of this happens, it doesn't give and error, just doesn't put the fNameSet and lNameSet in place.
Thanks in advance.
Related
-/src
|-/lib
| |- address.svelte
|
|-/routes
| |-/test
| | |- +page.svelte
| |- +page.svelte
I'm trying to load address component from /routes/test/+page.svelte. I'm using svelte kit to develop my service, and this file tree is built for example.
The address.svelte is like so. It's suppose to run external js file when I press the input square.
<svelte:head>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
window.onload = function() {
document.getElementById("address").addEventListener("click", function() {
new daum.Postcode({
oncomplete: function(data) {
document.getElementById("address").value = data.address;
}
}).open();
});
}
</script>
</svelte:head>
<div class="field">
<div class="container">
<div class="card">
<div class="content">
<h1>IGIS</h1>
<h2>Address Here</h2>
<br/>
<form>
<div>
<label class="label" for="address">소재지(주소)</label>
<br/>
<input class="input" id="address" type="text" name="address" placeholder=" " readonly required>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
and /routes/test/+page.svelte is like so
<script>
import Address from "$lib/address.svelte";
</script>
<Address></Address>
However when I click the input square, the external js doesn't seems to be loading. How am I suppose to do it?
You should write the login that use external js file inside onMount instead.
<script>
import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';
onMount(async () => {
// your code here
});
</script>
I'm building a Svelte input component which should be usable multible times on the same page.
<div>
<label>{label}</label>
<div>
<input bind:value>
<!-- some more elements -->
</div>
</div>
Trying to associate label and input I have the following problem:
I can't use implicit association by changing the outer <div> to <label>, since the input is not a direct child.
I can't use the labels for attribute, since reusing the element would create mutible identical ids.
Is there a way to create component instance unique ids (pre- or postfixed) in Svelte or is there another solution to this problem.
Or is the best solution to manually set a random string as id?
<script>
const id = random_string();
/* ... */
</script>
<div>
<label for={id}>{label}</label>
<div>
<input {id} bind:value>
<!-- some more elements -->
</div>
</div>
You could define a counter in module context and then use it to create unique IDs
Input.svelte
<script context="module">
let counter = 0
</script>
<script>
export let label
let value
let eltId = 'input_'+ counter++
</script>
<div>
<label for={eltId}>{label}</label>
<div>
<input id={eltId} bind:value>
</div>
</div>
App.svelte
<script>
import Input from './Input.svelte'
</script>
<Input label='Select Country' />
<Input label='Select Country' />
<Input label='Select Country' />
See REPL
Why not just define a unique name for the input since your need one? You could then just have a component like:
Input.svelte
<script>
export let name
export let label
let value
const getInputId = () => {
return `input_${name}`
}
</script>
<div>
<label for={getInputId()}>{label}</label>
<div>
<input id={getInputId()} bind:value>
</div>
</div>
And use it like:
App.svelte
<script>
import Input from './Input.svelte'
</script>
<Input name='country' label='Select Country' />
Checkout the REPL.
I am passing treeselect component as a slot as below.
<template v-slot:filters>
<treeselect v-model="value" :options="filterTreeData" />
</template>
My slot are placed as below.
<div class="rule-filter-container">
<slot name="filters"></slot>
</div>
<div class="rule-operator-container">
<el-select
v-if="treeSelect.selectedValue.dataType !== dataType.Checkbox && treeSelect.selectedValue.dataType !== dataType.Radio"
v-model="value"
filterable
placeholder="Type Or Select">
</el-select>
</div>
As in above I have written v-if condition for the sake of example.
It is not working as of now. But I want to access treeSelect's selected value. and based on that I want to keep or remove "el-select" component.
So how do I access that selected value of treeselect in child component which is passed as a slot?
You should be able to bind the slot's value to the component.
<template v-slot:filters :slotValue="value">
<treeselect v-model="value" :options="filterTreeData" />
</template>
And in the component:
<div class="rule-filter-container">
<slot name="filters"></slot>
</div>
<div class="rule-operator-container">
<el-select
v-if="slotValue !== dataType.Checkbox && slotValue !== dataType.Radio"
v-model="value"
filterable
placeholder="Type Or Select">
</el-select>
</div>
I have the following partial:
<template is="dom-repeat" repeat="{{myItems}}">
One: <paper-input type="number" value="{{myValue1}}"></paper-input>
Two: <paper-input type="number" value="{{myValue2}}"></paper-input>
Three: <paper-input type="number" value="{{myValue3}}"></paper-input>
<template is="dom-if" if="[[_show(myValue1)]]">
Four: <paper-input value="{{myValue4}}></paper-input>
</template>
</tempalte>
myItems is an array with 4 elements, so, I can see 12 paper-inputs.
The problem is when I enter some text into first paper-input, the text appears into others paper-inputs (the firsts of each iteration).
Is there any way to bind different variables into dom-repeat template?
EDITED to use indices/ordinals instead of array values:
<template is="dom-repeat"
items="{{myItems}}" as="item">
One: <paper-input type="number" value="{{item.1}}"></paper-input>
Two: <paper-input type="number" value="{{item.2}}"></paper-input>
Three: <paper-input type="number" value="{{item.3}}"></paper-input>
<template is="dom-if"
if="[[_show(item.1)]]">
Four: <paper-input value="{{item.4}}></paper-input>
</template>
</template>
I was wondering what is the best way to submit a form(iron-form) with the following structure:
Basic Polymer iron-form (starting point):
<form is="iron-form" method="post" action="/" id="basic">
<template is="dom-repeat" id="addresses" items="[[addresses]]">
<paper-input name="city" label="City" value="[[item.city]]"></paper-input>
<paper-input name="street" label="Street" value="[[item.street]]"></paper-input>
</template>
</form>
Target JSON payload structure after submit:
addresses: [
{ city: "X", street: "X" },
{ city: "Y", street: "Y" }
]
The way I am doing it now is using the dom-repeat's index and manually extending the payload at iron-form-presubmit phase. The idea behind this approach is coming from Spring-MVC where this is handled in a really neat way.
i.e.:
<form is="iron-form" method="post" action="/" id="basic">
<template is="dom-repeat" id="addresses" items="[[addresses]]">
<paper-input name="addresses[[[index]]].city" label="City" value="[[item.city]]"></paper-input>
<paper-input name="addresses[[[index]]].street" label="Street" value="[[item.street]]"></paper-input>
</template>
</form>
Thanks in advance!