I am trying to use < paper-datatable-column > . Inside it I have to use my own polymer element but for some reason its not showing up.
<paper-datatable id="datatable" data="{{users}}" selectable multi-selection selected-items="{{selectedItems}}" on-row-tap="rowTapped">
<paper-datatable-column header="risk" type="Number" property="risk" sortable>
<risk-codes riskcolor={{value}}></risk-codes>
</paper-datatable-column>
</paper-datatable>
Where < risk-codes > is my custom polymer element. Which is defined below :
<template is="dom-if" if={{riskcolor}}>
<div class="fab red">
<paper-ripple class="circle" recenters></paper-ripple>
</div>
</template>
And here is the script of < risk-codes > :
Polymer({
is: 'risk-codes',
properties: {
riskcolor:{
type:Number
}
}
}); //end-polymer
I added < template is="dom bind" > in my custom element and inside it I had put the rest of the code. This did the trick. Strange because i have many custom elements where i am not using "dom-bind" but it works. Maybe because < risk-codes > expects a property from its parent element so it needs to be bound to the DOM. Just a guess, not sure if i am right.
Related
How does AlpineJS re-render a template ?
<script>let contacts = [];</script>
<div x-data="{ persons: contacts }">
<template x-for=" person in persons ">
<div x-text=" person "></div>
</template>
<button x-on:click="contacts.push('Jack'); persons = contacts; console.log(persons.length);">Click</button>
</div>
I was expecting the div to have multiple text of Jack on click.
In your case/example contacts are out of Alpine's scope, once the component is initiated it's in it's own bubble, anything outside out the component scope x-data won't trigger a re-render.
If you change contacts.push('Jack'); to persons.push('Jack');, that will trigger a re-render.
Maybe it's not the most efficient way but I've had a similar problem, to resolve it I used the get function inspired from this.
My use case is the following:
JS:
get updatedState() {
var config_state = [];
#update your data here
return config_state;
}
HTML:
<template x-for="config in updatedState">
#Do what you want here
</template>
Each time your data changes, your loop will update the data
Sometimes it is needed to comment out some element attribute without having to remember it in order to restore it quickly after some tests.
Commenting out whole element is achievable with HTML commenting syntax
<div>
<!-- <h2>Hello</h2> -->
<span>hi</span>
</div>
However this won't work with a single attribute (causes rendering error)
<my-comp id="my_comp_1"
v-model="value"
<!-- :disabled="!isValid" -->
#click="handleClick">
</my-comp>
The best approach I could see and used before was to make a tag backup by copying whole element and settings v-if="false" for it (or comment out whole copied element) and continue to experiment with original one
I don't think you can put an HTML comment inside a component tag, for much the same reason you can't put comments inside an HTML element opening tag. It's not valid markup in either situation. I think the closest you could come would be to place the comment in the quotes:
:disabled="// !isValid"
Which would have the same effect as:
:disabled=""
Depending on whether your component can handle that value being missing, that might fit your needs.
Prefix the attribute value with data- or Wrap with data attribute.
<my-comp id="my_comp_1"
v-model="value"
data-:disabled="!isValid"
data-_click="handleClick"> # `#` could not be used
</my-comp>
or
<my-comp id="my_comp_1"
v-model="value"
data='
:disabled="!isValid"
#click="handleClick">
'>
</my-comp>
I'll with the attribute set to something like data-FIXME.
I got these solutions to work. I thought of solution 1.
Starting code:
<div
v-for="foo in foos"
:key="foo.id"
#click="foo.on = !foo.on /* JavaScript comment. */"
>
<label>
{{ foo.name }} {{foo.on}}
</label>
</div>
The Vue directive HTML attribute that needs to be disabled: #click="foo.on = !foo.on"
How the final div tag will run:
<div
v-for="foo in foos"
:key="foo.id"
>
Solutions 1 and 2 keep the disabled attribute inside its tag. I didn't find a good way to make a "raw string". To keep the attribute in the tag, the outer and inner quotes must be different.
sol. 1: I made a new v-bind attribute (:lang) to put the disabled attribute in.
:lang='en /* #click="foo.on = !foo.on" */'
Sol. 2: Pick a Vue directive. Put the attribute in.
v-for="foo in foos /* #click='foo.on = !foo.on' */"
Solutions 3 and 4 put the attribute outside the tag.
Sol. 3:
<div v-if="false">
#click="foo.on = !foo.on"
</div>
Sol. 4: <!-- #click="foo.on = !foo.on" -->
One way to remove/hide component attributes is to create a custom directive for it.
Let's say you create a directive called v-hide and put it in your component as:
<my-comp v-model="value" #click="handleClick" v-hide :disable='true'></my-comp>
And the output would be:
<my-comp v-model="value" #click="handleClick"></my-comp>
Here is a working example:
Vue.component ('my-component', {
template: `<p> A custom template </p>`
})
Vue.directive('hide', {
inserted: function (el) {
console.log('el before hide', el)
while(el.attributes.length > 0)
el.removeAttribute(el.attributes[0].name);
console.log('el after hide', el)
}
})
new Vue({
el: '#app',
data () {
return {
someValue: 'Hello'
}
}
})
<script src="https://unpkg.com/vue#2.5.3/dist/vue.js"></script>
<div id="app">
<my-component v-model='someValue' v-hide :disable='true'></my-component>
</div>
I have some data that is accessible via:
{{ content['term_goes_here'] }}
... and this evaluated to either true or false. I'd like to add a class depending on the truthiness of the expression like so:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
where true gives me the class fa-checkbox-marked and false would give me fa-checkbox-blank-outline. The way I wrote it above gives me an error:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
How should I write it to be able to conditionally determine the class?
Use the object syntax.
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"
When the object gets more complicated, extract it into a method.
v-bind:class="getClass()"
methods:{
getClass(){
return {
'fa-checkbox-marked': this.content['cravings'],
'fa-checkbox-blank-outline': !this.content['cravings']}
}
}
Finally, you could make this work for any content property like this.
v-bind:class="getClass('cravings')"
methods:{
getClass(property){
return {
'fa-checkbox-marked': this.content[property],
'fa-checkbox-blank-outline': !this.content[property]
}
}
}
<i class="fa" v-bind:class="cravings"></i>
and add in computed :
computed: {
cravings: function() {
return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
}
}
Why not pass an object to v-bind:class to dynamically toggle the class:
<div v-bind:class="{ disabled: order.cancelled_at }"></div>
This is what is recommended by the Vue docs.
the problem is blade, try this
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
You could use string template like with backticks `` :
:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"
if you want to apply separate css classes for same element with conditions in Vue.js
you can use the below given method.it worked in my scenario.
html
<div class="Main" v-bind:class="{ Sub: page}" >
in here, Main and Sub are two different class names for same div element.
v-bind:class directive is used to bind the sub class in here.
page is the property we use to update the classes when it's value changed.
js
data:{
page : true;
}
here we can apply a condition if we needed.
so, if the page property becomes true element will go with Main and Sub claases css styles. but if false only Main class css styles will be applied.
I am using a powermail form inside of a two-column gridelement. While outside of the gridelement, the form works finde, but as I soon as I pack it into a column, it doesn't get rendered in the frontend.
Instead I just get a cache-reference (something like this: '< !--INT_SCRIPT.bac5b8b4bd3180848642d7849f -- >' ). So obviously the problem is somehow related to the content being cached.
So my question is: Where can I get started on fixing this?
How can I tell the gridelement to output rendered content instead of the cache-hash? Or would I need to get into the powermail code?
Here's my grid setup, in case that is any help:
plugin.tx_gridelements_pi1.setup.2col {
outerWrap = <div class="row"> | </div>
outerWrap.preCObject < lib.stdheader
columns.default {
outerWrap = <div class="col col-xs-12 col-sm-6"> | </div>
renderObj =< tt_content
}
}
Have you check in witch order you include the static templates? Gridelements should be the last entry.
And do you have an output when you deleting the grid setup..?
I have got a polymer-element with following html:
<polymer-element name="tab-bar">
<template>
<button>Hello</button>
<template repeat="{{item in items}}">
<div>This element is {{ item }}</div>
</template>
</template>
<script type="application/dart" src="tab_bar.dart"></script>
</polymer-element>
The underlying dart class looks as follows:
import 'package:polymer/polymer.dart';
#CustomTag('tab-bar')
class TabBar extends PolymerElement {
List items;
TabBar(List<String> items) {
this.items = toObservable(items);
}
}
With the following approach, it isn't possible to programmatically add the element:
query('body').children.add(createElement(new TabBar(['One','Two','Three'])));
So now, how can I add such a polymer element programatically and also set the list in the constructor?
As of polymer 0.8.5 you can use constructor like
new Element.tag('tag-bar');
also, no more .xtag and no more .host (host == this now)
credits go to Seth Ladd who explained this on polymer mailing list
Note: this only works for polymer.dart < 0.8.5. See other answer for the new way.
Custom elements don't really have constructors like we're familiar with them in Dart. Instead, try this:
var tabBar = createElement('tag-bar');
tabBar.xtag.items = toObservable(['a','b','c']);
query('body').children.add(tabBar);