I'm creating a multiselect in Vue js, but wat i dont understand is how can i get multiple instance of the component with each a different initial selected value (v-model). Every component is getting the same initial value because of the selected data on the parent. Should i also use props here instead of v-model? or should i move the data object from the parent to the component itself?
Wat i want
Component one should have initial select "{ id: "0", text: "One"}" and
Component two should have initial select "{ id: "1", text: "Two"}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<div id="app">
<multi-select v-model="selected" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
<multi-select v-model="selected" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("multi-select", {
props: ["options", "value"],
template: `
<div>
<div v-for="option in selectedOption">{{ option.text }}</div>
<hr>
<div v-for="option in options">{{ option.text }}</div>
</div>
`,
computed: {
selectedOption() {
return this.value;
}
}
});
new Vue({
el: "#app",
data: {
selected: [{ id: "0", text: "One"}],
}
})
</script>
</body>
</html>
Pass index as props and your child component can use this index to decide the default value.
v-bind:index="0"
v-bind:index="1"
v-model means the selected value, pay attention that you are assigning both multiselects
to the same variable.
a possible solution is creating another variable, lets say selector2 and selector1
and assigning your v-model accordingly.
data: {
selected1: [{ id: "0", text: "One"}],
selected2: [{ id: "1", text: "Two"}],
}
and on assignment
<div id="app">
<multi-select v-model="selected1" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
<multi-select v-model="selected2" :options='[{ id: "0", text: "One"}, { id: "1", text: "Two"}'></multi-select>
</div>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 12 months ago.
So I am creating JSON objects for certain incomes and expenses. I have added names, amounts and if recurring or not.
However Im trying to print values from these objects to a div element by using a for loop.
I have tried getting the div by getElementById and then using innerHtml to print the values of the object but I get this error:
Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
Below is my javascript:
const incomes = [
{
name: "Walter",
amount: 2000,
recurring: true,
},
{
name: "James",
amount: 4000,
recurring: true,
},
{
name: "Mike",
amount: 500,
recurring: true,
},
{
name: "Jane",
amount: 1000,
recurring: true,
},
{
name: "Larry",
amount: 5000,
recurring: true,
},
];
for (i = 0; i < incomes.length; i++) {
let container = document.getElementById("container");
container.innerHTML(expenses[i].name);
}
const expenses = [
{
name: "Electricity",
amount: 700,
recurring: true,
},
{
name: "Water",
amount: 500,
recurring: true,
},
{
name: "Internet",
amount: 800,
recurring: true,
},
{
name: "Rent",
amount: 7500,
recurring: true,
},
{
name: "Transport",
amount: 1500,
recurring: true,
},
];
for (i = 0; i < expenses.length; i++) {
let container = document.getElementById("container");
container.innerHTML(expenses[i].name);
}
And my HTML too:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Incomes and Expenses</title>
<script src="incomes.js"></script>
<link rel="stylesheet" href="incomes.css" />
</head>
<body>
<h1 class="income">Incomes</h1>
<div id="container" class="container"></div>
</body>
</html>
Thank you
You probably want to execute your javascript commands after the html is loaded. Try moving it before closing of the <body> tag (see below). Right now, it executes before your container element is created in the DOM.
...
<script src="incomes.js"></script>
</body>
</html>
I'm trying to see if this is possible with the library Select2. Say I have a list of data as follows:
Apple
Basketball
Banana
Orange
Football
Is there a way to show only Apple, Banana, and Orange when I type in "fruit," and show Basketball and Football when I type "Sports." Meaning is there a "related search/tagging" type of functionality?
Thanks!
you could do something like this:
The search documentation: https://select2.org/searching
function matchCustom(params, data) {
const term = $.trim(params.term);
if (term === "fruit" || term === "sports") {
if (data.type === term) {
return data;
}
return null;
}
return data;
}
const data = [
{
id: 0,
type: "fruit",
text: "apple"
},
{
id: 1,
type: "fruit",
text: "orange"
},
{
id: 2,
type: "sports",
text: "football"
},
{
id: 3,
type: "sports",
text: "basketball"
}
];
$(document).ready(() => {
$(".js-example-basic-single").select2({ data, matcher: matchCustom });
});
.js-example-basic-single {
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.13/dist/js/select2.min.js"></script>
</head>
<body>
<div id="app"></div>
<select class="js-example-basic-single" name="state"></select>
</select>
</body>
</html>
I'm working with form that contain select element. I need to fill select with the data coming via json format. How to use jquery template to fill the select element?
I read about jquery template, it's documentation. But still can't get right result.
2 question: Is it good way to use jQuery Template for big data, for example: 4000 columns?
<div class="col-lg-5">
<select id="sel"></select>
</div>
<script id="optionTmpl" type="text/x-jquery-tmpl">
{{each $options}}
<option value="${$code}">${$title}</option>
{{/each}}
</script>
var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
$('#optionTmpl').tmpl(options).appendTo('#sel');
You may have a little change in the code as follows,
var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
$('#optionTmpl').tmpl(options).appendTo('#sel');
<!-- These are added to execute the code -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
<div class="col-lg-5">
<select id="sel"></select>
</div>
<!--
These was your code,
<script id="optionTmpl" type="text/x-jquery-tmpl">
{{each $options}}
<option value="${$code}">${$title}</option>
{{/each}}
</script>
which is changed to =>
-->
<script id="optionTmpl" type="text/x-jquery-tmpl">
<option value="${code}">${title}</option>
</script>
If your json format is fixed from server side then you can try this.
var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
$.each(options , function(i, obj){
$('#select').append($('<option>').text(obj.title).attr('value', obj.code));
});
we can also append the json to the input type select field if the key and value are same like this.
Reference : https://jocapc.github.io/jquery-view-engine/
var options = [ "A" ,"B" ,"C" ,"D"];
$('#myselect').view(json);
Variables in template are defined incorrectly
${$code} should be ${code}
You can use the following method instead of a for loop as explained in the plugin
$(document).ready(function() {
var options = [
{ code: "1", title: "A" },
{ code: "2", title: "B" },
{ code: "3", title: "C" },
{ code: "4", title: "D" },
{ code: "5", title: "E" },
];
var markup = '<option value="${code}">${title}</option>';
// Compile the markup as a named template
$.template( "optionsTemplate", markup );
// Render the template with the options data and insert
// the rendered HTML under the "sel" element
$.tmpl("optionsTemplate", options ).appendTo("#sel");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<div class="col-lg-5">
<select id="sel"></select>
</div>
In jsTree, I want to draw a new tree replacing the previous one and have nodes initially selected in the new tree.
In the code below, I confirmed that state : {opened : true} made the node initially opened and state : {disabled : true} made the node initially disabled, so I thought state : {selected : true} works too, but actually it is not.
Please note that specifying state : {selected : true} when calling $('#using_json').jstree({...}); does result in the node selected as described in https://www.jstree.com/docs/json/. Then, I wonder why state : {selected : true} does not work when I replace a existing tree with a new tree (while state : {opened : true} and state : {disabled : true} are working).
How can we achieve nodes to be initially selected after replacing tree?
$('#using_json').jstree({ 'core' : {
data : [
{
text : 'Previous root node',
}
]
} });
const newData = [
{
text : 'New root node (Initially opened)',
state : {
opened : true, //'opened' takes effect after refresh
},
children : [
{ text : 'Child 1 (Initially disabled)',
state : {
disabled : true, //'disabled' takes effect after refresh
}
},
{ text : 'Child 2 (Intended to be selected initially but failing)',
state : {
selected : true //'selected' does NOT take effect after refresh
}
}
]
}
]
$('#using_json').jstree(true).settings.core.data = newData;
$('#using_json').jstree(true).refresh(true);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
<div id="using_json"></div>
</body>
</html>
You could try using the select_node config property when you initialize the tree, which you could do just once. For this you need to add some IDs to your nodes so you can then reference the selected node:
$('#using_json').jstree({
'core': {
select_node: 'c2',
data: [{
text: 'Root node after Refresh (Opened)',
state: {
opened: true, //'opened' takes effect after refresh
},
children: [{
text: 'Child 1 (Disabled)',
id: 'c1',
state: {
disabled: true, //'disabled' takes effect after refresh
}
}, {
text: 'Child 2 (Intended to be selected but failing)',
id: 'c2',
state: {
selected: true //'selected' does NOT take effect after refresh
}
}]
}]
}
});
//$('#using_json').jstree(true).settings.select_node = 'c2';
//$('#using_json').jstree(true).refresh(true);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
<div id="using_json"></div>
</body>
</html>
Check out this answer also.
Alternative with refresh
Since OP needs to keep the initial code structure (init -> change config data -> refresh) an alternative solution would be to "force" selection by using the callback of the refresh event:
$('#using_json').jstree({
'core': {
data: [{
text: 'Previous root node',
}]
}
});
const newData = [{
text: 'New root node (Initially opened)',
state: {
opened: true, //'opened' takes effect after refresh
selected: true
},
children: [{
text: 'Child 1 (Initially disabled)',
id: 'c1',
state: {
disabled: true, //'disabled' takes effect after refresh
}
}, {
text: 'Child 2 (Intended to be selected initially but failing)',
id: 'c2',
state: {
selected: true //'selected' does NOT take effect after refresh
}
}]
}];
$('#using_json').jstree().settings.core.data = newData;
//$('#using_json').jstree(true).settings.select_node = 'c2';
$('#using_json').jstree(true).refresh(true);
$('#using_json').on("refresh.jstree", function(e) {
$('#using_json').jstree('select_node', 'c2');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
<div id="using_json"></div>
</body>
</html>
I have a simple angular dropdown like bellow:
<select class="form-control" ng-model="docPropIdentityModel.OwnerLevel"
ng-options="ownerLevel as ownerLevel.LevelName for ownerLevel in ownerLevels track by ownerLevel.OwnerLevelID">
<option value="">--Select--</option>
</select>
I've a value for OwnerLevelID, I want to assign the OwnerLevelID as the value of the dropdown & show the respective LevelName. I can easily do this by using jquery but want to do it the angular way.
I tried to assign the value for the model like bellow:
$scope.docPropIdentityModel.OwnerLevel = "123456";
But it didn't work. How it can be done?
As you are using track by expression, You need to set the OwnerLevelID property of object associated with ngModel.
$scope.docPropIdentityModel.OwnerLevel = { OwnerLevelID : "123456"};
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function ($scope) {
$scope.register = {};
$scope.register.countryId = "4";
$scope.register.countries = [{
id: "1",
name: "India"
}, {
id: "2",
name: "USA"
}, {
id: "3",
name: "UK"
}, {
id: "4",
name: "Nepal"
}];
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<div>
Country Name : <select ng-model="register.countryId" ng-options="country.id as country.name for country in register.countries"></select>
</div>
<div>
Country-Id : {{register.countryId}}
</div>
</div>
</body>
</html>