I am working on Angular 5 app form. Inside template I need to apply div id that is concatenate with question.key (question.key value is coming via json) with "#" or #. I have apply following code but not getting result what I want??
<div [id]="('#'+'question.key')" class="question-block">
found the solution....
Template
<div [id]=assembleQuestionId(question.key) class="question-block">
component
assembleQuestionId(questionKey:string)
{
return "QB_"+questionKey; //QB (questionBlock)
}
Related
I am using vuejs3 and I want to make a filter. When user click to the link I want to append the url and push it to browser address bar for now. Later I will do ajax request to update page with product list.
So far I am able to send parameters to URL, but only one item from one group.From first color group I want user to select only one but from second size group I want user to select multiple.
I want this type of URL: localhost:8080/product?color=red&size=medium&size=large
<template>
<div class="products">
<div class="multi_filters">
<h1>Multi Filter By Color</h1>
Red color
Blue color
</div>
<div class="single_filter">
<h1>Multi Size</h1>
Medium
Large
</div>
</div>
</template>
<script>
export default {
data() {
return {
filters:{},
selectedFilters:{}
}
},
methods:{
activateFilter(key,value){
this.selectedFilters = Object.assign({},this.selectedFilters,{[key]:value})
console.log(this.selectedFilters)
this.$router.replace({
query: {
...this.selectedFilters
}
})
}
}
}
</script>
You are expecting size to be an array, this post will helps.
Submitting multi-value form fields, i.e. submitting arrays through GET/POST vars, can be done several different ways, as a standard is not necessarily spelled out.
Three possible ways to send multi-value fields or arrays would be:
?cars[]=Saab&cars[]=Audi (Best way- PHP reads this into an array)
?cars=Saab&cars=Audi (Bad way- PHP will only register last value)
?cars=Saab,Audi (Haven't tried this)
In vuejs the elements are assigned an attribute starting 'data-v-***'
I could not find any docs about fetching this value so ended up using refs and grabbing the attributes of the main node:
<template>
<div class="m-colour-picker" ref="thisContainer">
...
</div>
</template>
const attributes = this.$refs.thisContainer.getAttributeNames();
let dataAttribute = '';
attributes.forEach((attribute: string) => {
if (attribute.substring(0, 5) === 'data-') {
dataAttribute = attribute;
}
});
But it feels a little forced.. is there a method in vue to fetch this already built in?
That has little to do with Vue.js. Data attributes for any element are automatically synced with it's internal dataset object.
Example:
console.log(foobar.dataset);
console.log(foobar.dataset.vFoo);
console.log(foobar.dataset.vBar);
// notice how data attributes containing more than the initial data- dash
// are automatically transformed to camel case:
// data-v-foo-bar ===> dataset.vFooBar
console.log(foobar.dataset.vFooBar);
// if all you care about is the names of the attributes:
console.log(Object.keys(foobar.dataset));
<div id="foobar" data-v-foo="bar" data-v-bar="baz" data-v-foo-bar="foobaz"></div>
I'm using the riot for the system. but I have a problem using the common tag in every place. because I have to copy the all common tag each page.
I added all tags like this. Does anyone have the solution for this ?
<st-service>
<st-alert></st-alert>
<st-header></st-header>
<st-body></st-body>
<st-footer></st-footer>
</st-service>
<st-profile>
<st-alert></st-alert>
<st-header></st-header>
<st-body></st-body>
<st-footer></st-footer>
</st-profile>
I found a solution, I'm using this method to handle these common tags. like this
<st-common>
<st-alert></st-alert>
<st-header></st-header>
<yeild></yeild>
<st-footer></st-footer>
</st-common>
service-page.tag // page
<st-service-page>
<st-common>
<st-service></st-service>
</st-common>
<st-service-page>
profile-page.tag // page
<st-profile-page>
<st-common>
<st-profile></st-profile>
</st-common>
<st-profile-page>
service-view.tag
<st-service>
// html / code body related to module
</st-service>
profile-view.tag
<st-profile>
// html / code body related to module
</st-profile>
If needed in details about this I can explain.
I'd have to know more about how you're routing to say for sure, but I think you should avoid using a different outer tag for each page. If your HTML looks something like this:
<body>
<st-app />
<script>
const pages = {
"/": "st-home",
"/about/": "st-about",
}
const content_tag = pages[window.location.pathname] || "st-notfound"
riot.mount("st-app", {
content_tag: content_tag
})
</script>
</body>
Then <st-app> would be defined something like:
<st-app>
<st-alert></st-alert>
<st-header></st-header>
<div data-is={this.opts.content_page}></div>
<st-footer></st-footer>
</st-app>
The important thing here being that you're controlling which tag should be used via the data-is attribute and the mounting options for <st-app>. In this example <st-home>, <st-about>, and <st-notfound> are riot components defined elsewhere.
I have input field on which token jquery library is applied means we can input multiple parameters separated by the comma (image 1), So In the first page, it is showing fine but from the second page it's not working (image 2) means from second-page class is not getting so it is not working.
In below code if I alert $('.token-input') then only 3 getting but the total is more than 10. It means that only first page elements are getting in makeEditable function.
Please help!
Code
makeEditable: function($element, successCallback) {
$('.token-input')
.each(function(index, element) {
...some code
}
}
I've got solution...by using fnGetNodes()
var oTable = $('#test').dataTable();
$('.token-input', oTable.fnGetNodes())
.each(function(index, element) {
...some code
});
I'm attempting to bind a HTML element which contains a string echoed via PHP so that I can use it with VueJS. Essentially what I am going to be doing is switching between GBP and USD depending on some php/mysql database queries (USD is default value). Here is a simplified example of what I have tried so far.
<div id="app">
<?php $string = 'GBP'; ?>
<!-- Hide this from the front end but bind to Vue somehow -->
<span v-el:currency style="display: none;"><?php echo $string; ?></span>
<p>Payment currency: {{ currency }}</p>
</div>
Of course I could just echo the php variable again, but the main reason I want to bind it to a VueJS element is so I can use the value of this element in my JS to do something like this...
if (this.currency === 'GBP') {
return "Paying in GBP";
} else {
return "Paying in USD";
}
Worth noting that I already have a fair bit of VueJS working within this #app so it's nothing to do with the configuration of Vue being wrong, more a case of just not knowing the correct way to approach the issue.
I would not interleave PHP and javascript inside a component.
Why don't you create a new script at the end with the variables you need?
<!-- bottom of the body -->
<script>var currency = <?php echo $yourVar; ?></script>
And then it will be a global variable and you just take it from there.