I want to list the names using handlebarjs. I need the language to be shown as list inside a dropdown.
Now am getting the dropdown with data displayed as a paragraph not list.
Here is the json file..
"Data": [
{
"FirstName": "Sam",
"MiddleName": "",
"LastName": "Thomson",
"Language": [
"English",
"French",
"Spanish",
"German",
"Hindi"
]
}
Here is the html file..
<td><label rel="popover" class="btn" data-title="Spl" data-content="{{Language}}"data-placement="bottom" >Language</label>
<div class="" id="spl">
<ul class=" nav"></ul>
</div>
</td>
You will need two block helpers:
with to "navigate" through the object's properties
each to iterate over an array
Here is how I would do it:
{{with Data}}
<ul>
{{each Language}}
<li>{{this}}</li>
{{/each}}
</ul>
{{/with}}
You need to do {{this}} since your array only contains strings.
Related
I have a products table and images table. A product can have multiple images. Now I want to get just one product and display it in view. I am able to get the whole object but when I display it the image part displays the whole object. How can I get the inner values.
My Vue Code
<div v-for="product in Products.data" :key="product.id" class="p-2">
<div class="item p-2">{{product.id}}</div>
<div class="item p-2">{{product.title}} Price:{{product.price}} </div>
<div class="item p-2"><p>Loc:{{product.location}}</p></div>
<div class="item p-2"><p>image:{{product.images[0]}}</p></div>
<div class="item p-2">
<a class="btn btn-primary btn-sm" :href="'/products/'+product.id">View</a>
</div>
Script
export default {
data() {
return {
Products: {
images: []
},
id: '',
name: ''
}
},
What am getting, the results:
10
Bedsitter Price:6000
Loc: Opposite GG Apartment
image:{ "id": 16, "title": "26f16f925b189465.jpg", "filename": "26f16f925b189465.jpg", "created_at": "2021-01-24T16:12:35.000000Z", "updated_at": "2021-01-24T16:12:35.000000Z", "pivot": { "products_id": 10, "images_id": 16 } }
I have the following nav menu made with bootstrap toggle where only the first element of the list is being showed, no matter which one it is. I tried replacing the first element with another one and I get the same behaviour so this makes me believe that the html code is working.
<a href="#getting-started" class="list-group-item list-group-item-
success" data-toggle="collapse" data-parent="#admin-menu"><span></span><i
class="fa fa-tachometer fa-lg" aria-hidden="true"></i>Getting Started<i
class="fa fa-caret-down"></i></a>
<div class="collapse sp" id="getting-started">
<a class="navlink list-group-item" href="software.html">General
Information</a>
<a class="navlink list-group-item"
href="install_linux.html">Linux Installation</a>
<a class="navlink list-group-item"
href="install_win.html">Windows Installation</a>
<a class="navlink list-group-item" href="install_mac.html">Mac
Installation</a>
<a class="navlink list-group-item"
href="install_docker.html">Docker Installation</a>
<a class="navlink list-group-item"
href="lang_installation.html">Installing Languages</a>
<a class="navlink list-group-item" href="login.html">Login</a>
<a class="navlink list-group-item"
href="license.html">License</a>
<a class="navlink list-group-item"
href="releasenotes.html">Release notes</a>
</div>
I load boostrap.js jquery and the script I use works on a different site. Or if you know where I can find a script for showing an online manual with a menu on the left site. In order to check behaviour please visit https://www.dialtrix24.com/test/doc/index.html where you can find it on the left side. The pages are not populated but the script only toggles the Getting Started section, the other lower sections are not working.
Here is part of the js script:
//Navigation slide animation
$( document).ready(function() {
var str = document.URL;
var address = str.substring(str.lastIndexOf('/')+1);
// address = address.replace(/[0-9]/g, '');
$('a[href="'+address +'"]').addClass('currentPage');
$('a[href="'+address+'"]').parent('div').addClass('in').addClass('heightTest').prev ().find('.fa-lg').css( "color", "#c70000" );
//$('a[href="'+address+'"]').parent('li').addClass('heightTest');
$('a[href="'+address+'"]').parent('li').parent('ul').parent('div').parent('div').addClass('heightTest').addClass ('in').parent('div').addClass('heightTest').addClass('in').prev().find('.fa-lg').css( "color", "#c70000" );
$('.blur').click(function(e){
$(".navbar-inverse").toggleClass('whiteColor');
$('.fa- chevron-right').toggleClass('rotate1');
});
var doc_links =
[
//Getting Started----------------------------------------------
{
"name":"General Information",
"link": "software",
"type": "docs",
"data": ""
},
{
"name":"Linux Installation",
"link": "install_linux",
"type": "docs",
"data": ""
},
and so on
Thank you
The issue was resolved as it was an offset of 75px to the div containing the anchors and so I added position relative and z-index 1 and now it is working.
I have input sections like so:
<div class="cloneable" data-id="0">
<div class="col-md-9">
<div class="form-group">
<label>Skills and Qualifications Titles</label>
<input placeholder="ex : PHP, WordPress" name="skill.name" type="text" class="form-control" vmodel="skill.name">
<span class="help-block text-danger" v-text="errors.get('skill.name')"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Skill Level %</label>
<input placeholder="ex : 90" name="skill.percentage" type="text" class="form-control" v-model="skill.percentage">
<span class="help-block text-danger" v-text="errors.get('skill.percentage')"></span>
</div>
</div>
</div>
Each section can be cloned to make a duplicate, so I am trying to array my data so I can access it backend like
skill[0]['name']
skill[1]['name']
skill[2]['name']
... etc
I am initiating the data like so:
skill: [
{
'name': '',
'percentage': ''
}
],
I have tried using the models like skill.index.name, but that doesn't work, how can I achieve what I am trying to do above?
If I understand, you have an array of skills like:
skill: [
{'name': 'a_name', 'percentage': '20'}
{'name': 'b_name', 'percentage': '30'}
],
and you want to access a particular member of that array in your template. The normal way the arrays end up in templates is using a v-for: like:
<li v-for="a_skill in skill">
{{ a_skill.name }}
</li>
…which would like all the skills in the array.
If you want to access a particular member of that array you will need to add the index like this:
<input v-model="skill[0].name"> // not skill.0.name
(don't forget the hyphen in v-model it's missing in your example)
You can even do that if you have some data you want to use as the index. For example:
data () {
return {
skill: [
{"name": "Foo"},
{"name": "Bar"}
],
i: 1
}},
Then you could use this in your template:
<input v-model="skill[i].name">
I’ve been playing around with Shopify’s sections feature. I thought I’d start simple, with a two field static section, to let admins edit the content of a help modal.
I read all the documentation I could find (not a whole lot), and “borrowed” some code from the Debut theme’s header section.
I have created a section file called help.liquid, and called it on my home page using {% section ‘help’ %}
The content is outputting on the page as expected, and the Help section is visible in the Sections tab of the admin system, but is uneducable. There must be something I’m missing, but I can’t work out what it is!
The code in my section file is as follows:
<div data-section-id="{{ section.id }}" data-section-type="help-section">
<div class="modal modal--help">
<div class="modal__hd">
<h2 class="modal__title">{{ section.settings.help_title }}</h2>
</div>
<div class="modal__bd">
{{ section.settings.help_content }}
</div>
</div>
</div>
{% schema %}
{
"name": "Help",
"settings": [
{
"type": "text",
"id": "help_title",
"label": "Help title",
"default": "Help"
},
{
"type": "text",
"id": "help_content",
"label": "Help content",
"default": "Here's some info on getting help"
}
]
}
{% endschema %}
I have this Json
all_subjects: [
{
id: 1,
subject_code: "COMP101",
description: "Knowledge Work Software & Presentation ",
name: "",
grade: [
{
id: 103,
subject_id: "1",
user_id: "17",
grade: "F",
reviewed: "0"
},
{
id: 104,
subject_id: "1",
user_id: "16",
grade: "F",
reviewed: "0"
}
]
},
my view
<tbody v-for="subject in subjects">
<tr>
<td>
<span> #{{ subject.subject_code }}</span>
</td>
<td>
<span> #{{ subject.description }} </span>
</td>
<td>
<span> #{{ subject.grade.grade->count() }} </span>
</td>
<td><span> <div class="btn btn-crimson btn-inline-block">View more info</div> </span></td>
</tr>
</tbody>
how do I count the that is F.
I received the json value using vue.resource this.$http.get throught API Call.
I'm trying this #{{ all_subjects.grade.grade->count() }} it doesn't work.
I wanted to count the subjects failure inside the v-for loop in vue.js what are the ways around this?
You are trying to call a method count() that doesn't exist in your code. Also, you can't call methods the same way in Javascript as you do in PHP. So you can't use the -> operator to make a method call.
You can add a new method in your Vue vm:
methods: {
count: function(subject) {
var grades = subject.grade.filter(function(grade) {
return grade.grade === 'F';
});
return grades.length;
}
},
The code above works by using Javascript's filter() method.
Then call that method in your view:
<ul>
<li v-for="subject in all_subjects">
Number of F's: {{ count(subject) }}
</li>
</ul>
Also note that in your v-for you are referencing subjects instead of all_subjects.