I use Vue.js in most of my (amateur) frontend development and I am stuck with a simple case I cannot understand.
In the code below, the content of the search box (an <input>) is transformed into an Array, which is then iterated against to create some links (<a>):
var vm = new Vue({
el: "#search",
data: {
search: '',
results: []
},
watch: {
search: function() {
this.results = this.search.split('')
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<h2>a dropdown</h2>
<div class="dropdown" id="search">
<input type="text" v-model="search">
<div id="myDropdown" class="dropdown-content">
<a :href="#e" v-for="e in results">{{e}}</a>
</div>
</div>
Why isn't the <input> displayed?
Note 1: When inspecting the code in Chrome, I see
<h2>a dropdown</h2>
<!---->
and such a comment is usually a sign that Vue.js has explicitly not rendered something.
Note 2: When refreshing the page, I see a very brief glimpse of the input field, so it is rendered, then hidden by (I assume) Vue.js.
If you properly bind the href attribute like :href="'#' + e" it works. Vue.js somehow seems to get confused by that otherwise.
Related
I'm working on a school project for a digital menu for a restaurant. What I've done so far is this Pop-UP:
It shows up when a button is pressed and I also added an 'X' icon to close it. The problem is that it's static and this is how I store it inside the index.html file:
<div class="menu">
<h2>Our Menu</h2>
<ul>
<li>
<label>
<input type="checkbox" name="">
<span class="icon"></span>
<span class="list">Fried Fish With Souce</span>
</label>
</li>
</ul>
</div>
As you can see, the data is stored in a static way and the problem is that I must have Pop-UPS for a lot of other categories. A solution would be to use Javascript to create the Pop-UP:
function showMenu()
{
const storedMenu = [{name: "Fried Fish With Souce", checked: false}, {name:"anotherName", checked: false}];
var content=`<div class="menu"><h2>Our Menu</h2>`;
storedMenu.reduce((accumulator, currentItem) => {
accumulator += `<ul><li><label>
<input type="checkbox" name="">
<span class="icon"></span>
<span class="list">${currentItem.name}</span>
</label><li><ul>`;content+=accumulator;
}, '' );
content+="</div>";
document.write(content);
}
This is the OUTPUT from the source code above:
The problem is that document.write seems to create a whole new page and thus, the CSS doesn't get applied, it OVERWRITES the index.html! My question is, how can I create the Dynamic Pop-UP using Javascript in this case but retaining the CSS, also the Pop-UP should simply appear on top of the index.html, but it should still be visible.Thanks in advance!
document.write only works during rendering of the page.
If you want dynamic lists, then use (example)
<div id="docwrite"></div>
<script>
var str = "<ul><li>abc</li><li>klm</li><li>xyz</li></ul>";
document.querySelector("#docwrite").innerHTML = str;
</script>
I have a textarea with a v-model named content. If I input some text there, it will be assigned to content.description. Now, I want to pass this to another element, namely to a div, but - here comes the tricky part - if my textarea contains some html-code, I want this html code to be interpreted as an html-code and not as a text.
For example, if I input
Some link
and I pass it to the div, I want it to be rendered as a clickable link, like
some link
and not as
Some link
Is there any way to do it?
We have to use v-html directive inorder to work. Take a look at the documentation Here, check the working snippet.
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
.as-console-wrapper{
display:none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.12/vue.js"></script>
<div id="app-6">
<p v-html="message"></p>
<textarea v-model="message"></textarea>
</div>
You could use Vue v-html directive to insert Html in div.
Working example:
new Vue({
el: '#app',
data: {
html: 'Some link '
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<textarea v-model="html"></textarea>
<div v-html="html"></div>
</div>
I am working on a weather page for myself (and maybe others in the future) and having an issue with a button that will show and hide weather alerts. You can view the page to see what I'm trying to do. (Sorry, I'm picking on FL, but they have a lot of alerts right now).
Page Source
JS Source
I have my alerts coming into an array and for each item, I need a button that will show and hide the alerts. My page source contains:
<div data-bind="foreach: alertsViewModel.features">
<div class="col-12">
<div class="alert alert-danger" role="alert">
<p>
<strong data-bind="text: properties.headline"></strong>
<button type="button" class="btn btn-link" data-bind="click: $root.showHideAlert">Show</button>
</p>
<div data-bind="attr: {id: properties.id}" style="display: none;">
<p data-bind="lineBreaks: properties.description"></p>
<p><strong>Instructions</strong></p>
<p data-bind="lineBreaks: properties.instruction"></p>
</div>
</div>
</div>
</div>
And my ViewModel looks like:
// ==================
// Alerts View Model
// ==================
var alertsViewModel = {
features: ko.observableArray([]),
hwoUrl: ko.observable(""),
hwoText: ko.observable(""),
showHideAlert: function(data, event){
alert('you clicked');
/*$('#hwo').toggle('slow',function(){
if ($('#showHwo').text() == "Show")
{
$('#showHwo').text("Hide");
}
else
{
$('#showHwo').text("Show");
}
});*/
}
};
ko.applyBindings(weatherViewModel, document.getElementById('weather-alerts'));
I have tried a few different methods and I can't get anything to work. (Thus the commented code and the alert). Which is strange, since I have done this a few times in the past with no issues. I'm sure it's something simple I missed. Any help would be appreciated.
Could it perhaps be because you used the weatherViewModel in your call to ko.applyBindings instead of alertsViewModel?
I think the $root in the button's bindings refers to weatherViewModel since that's the VM applied by ko.
Perhaps try changing the location of the function or simply use alertViewModel instead.
I am using Semantic UI 2.0 and trying to use data returned from its API to build the options inside my dropdown.
For the dropdown itself, I am using a code that is pratically the same as this code shown in Semantic UI's documentation:
<div class="ui search selection dropdown select-city">
<input type="hidden" name="city">
<i class="dropdown icon"></i>
<div class="default text">Select City</div>
</div>
I have a service that returns json-formatted cities, then Semantic UI shows in the console that the result was successful with all 261 cities:
"Using specified url" ["/cities/"] 1648
"Querying URL" ["/cities/"] 0
"Sending request" [undefined, "get"] 0
"Successful API Response" [Object { success=true, results=[261]}]
The /cities endpoint return a json formatted as:
{"success":true,"results":[{"description":"Opole","data-value":1},{"description":"Wrocław","data-value":2},{"description":"Warszawa","data-value":3},{"description":"Budapest","data-value":4},{"description":"Köln","data-value":5}, ...]}
It looks like that Semantic UI does not directly understand the format of the json.
I've tried many formats of json attributes, even tried to change a bit the html. For instance, tried to add an empty <div class="menu"> in the bottom of the select, hoping that Semantic UI would fill it in, e.g.,:
<div class="ui search selection dropdown select-city">
<input type="hidden" name="city">
<i class="dropdown icon"></i>
<div class="default text">Select City</div>
<div class="menu"></div>
</div>
I am trying to match the format of the attributes with the ones from the example, e.g., using "data-value" attribute.
But it did not work either, I've seen Semantic UI checks for that in the source code, so it does not make any difference. At the end, my problem persists and no items are inserted into the dropdown selection.
Without you posting the code that you're using I'm taking a bit of a stab here, but the dropdown expects data results to be keyed as { name: "Item 1", value: "value1" } as is explained in the relevant part of the documentation.
If you have a different field names then you can provide a fields structure in the settings to override these:
$('.ui.dropdown').dropdown({
fields: { name: "description", value: "data-value" },
apiSettings: {
mockResponse: {
success: true,
results: [
{"description":"Opole","data-value":1},
{"description":"Wrocław","data-value":2},
{"description":"Warszawa","data-value":3},
{"description":"Budapest","data-value":4},
{"description":"Köln","data-value":5}
]
}
}
});
The minimum HTML required is:
<div class="ui search selection dropdown">
<div class="text">Search</div>
</div>
or:
<div class="ui search selection dropdown">
<input class="search"></input>
</div>
The empty <div class="menu"></div> is automatically inserted, but an <input class="search"></input> is required and is only automatically inserted if you already have a <div class="text"></div> element.
Note however that, in what I believe to be a fault with the dropdown behaviour, it will not load the data until you start typing into the search field and so just clicking on the dropdown icon is not sufficient.
At work I'm just starting out with JavaScript, MVVM, and Kendo's JS framework, all at once, and I have a fairly simple problem.
I've created a View Model that allows Superheroes to be registered.
The JSBin I'm working in: http://jsbin.com/gewu/3/edit?html,js,output
Here's the HTML(view):
<div id="view">
Superhero: <input data-bind="value: name" /><br/>
Superpower: <input data-bind="value:power"type="text">
<label for="">from Earth?<input type="checkbox" data-bind="checked:fromEarth"></label>
<button data-bind="click: registerHero" >Display User Info</button>
<div id="array-display"></div>
<p>Entries: <span data-bind="text: knownHeroes.length"></span></p>
</div>
And here's the JS (viewModel):
var viewModel = kendo.observable({
knownHeroes : [],
name: "Hulk",
power:"Stength",
fromEarth: true,
registerHero: function() {
var name = this.get("name");
var power = this.get("power");
var fromEarth = this.get("fromEarth");
this.knownHeroes.push({"name":name,"power":power,"fromEarth":fromEarth});
}
});
kendo.bind($("#view"), viewModel);
Now, I'm trying to get the View to loop through and display the array of knownHeroes. But it won't render anything. I know the data is being pushed to the array, because I can see the array.length increasing, and I can look up specific values in the array. I'm assuming the problem has to do with how I'm referencing the array in the view. But I'm not sure. Here's the template I've written:
HTML:
<script id="registry-view" type="text/x-kendo-template">
<ul>
# for (var i=0; i < knownHeroes.length; i++) { #
<li>
<ul>
<li>#= knownHeroes[i].name #</li>
<li>#= knownHeroes[i].power #</li>
<li>#= knownHeroes[i].fromEarth #</li>
</ul>
</li>
# } #
</ul>
</script>
<script type="text/javascript">
var template = kendo.template($("#registry-view").html());
$("#array-display").html(template); //Append the result
</script>
You have got some mistakes.
First of all you got script wrote in html portion of this jsbin as well as in javascript section. Html part executes first so the viewModel isn't defined yet (check console for errors)
Also the object you pass to the template is stored always in "data" variable.
Last mistake is when using your desing, anytime you add any new data row, whole template needs to be reloaded (including all previously added data rows)
I corrected some of your mistakes in following jsbin: http://jsbin.com/jomemuko/1/edit (actually you need to hit the Run with JS button to make it work - some script loading issue I don't have time for)
Ideally you should use a listView widget and assign it a template for only one item. Also in your viewModel you should create a kendo dataSource and pass it as an option to newly created listView. Then in the viewModel you should refine your registerHero function to make it add the hero to the dataSource. Widget should automatically refresh.
Hope it helps