I have a website built in Bootstrap v3.1.0 and inside I have a text input field. I want to apply auto-complete to it, but can't get Typeahead.js to work!
When I type something in, I get no auto-complete !
View Code:
#Html.TextBoxFor(x => x.Manufacturer, new { #class = "form-control manufacturer" })
#Html.ValidationMessageFor(x => x.Manufacturer)
JS Code
$(function() {
$('.manufacturer').typeahead(null,
{
name: 'manufacturers',
local: ["Audi",
"BMW",
"Vauxhall",
"Toyota"
]
});
});
What am I doing wrong? I also added the autocomplete="off" to my input field, but that still did not do anything. I also made sure that all scripts are being loaded.
It seems as though if you are using 'HEAD' of twitter typeahead you are a bit behind the curve in your examples.
var cars = new Bloodhound({
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.car);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [{
car: "Audi"
}, {
car: "BMW"
}, {
car: "Vauxhall"
}, {
car: "Toyota"
}]
});
$(function () {
cars.initialize();
$('.manufacturer').typeahead(null, {
name: 'manufacturers',
displayKey: 'car',
source: cars.ttAdapter()
});
});
Also a fiddle in action: http://jsfiddle.net/Mutmatt/7jxRy/
Most of the info can be found at http://twitter.github.io/typeahead.js/examples/ and https://github.com/twitter/typeahead.js
Related
I'm new using VUE.JS and I'm in love with it! I love the vue-router and router-link! They are awesome!
Now I have a table populated by data coming from axios and I would like to build a link using this data in a custom method to have the team name clickable.
Here the template:
<BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"></BootstrapTable>
Axios returns ID, name and other data used to update the table as here
Basically, I need to update the values in my table using the axios's received data. Something like:
team: '<a v-bind:href="club/'+team.id+'">'+team.team+'</a>',
or
team: '<router-link :to="club/'+team.id+'">'+team.team+'</router-link>',
But obviously it dosn't works...
How can a build a link?
I fixed it using custom column event and formatter in columns table setting:
{
field: 'match',
title: 'Match',
formatter (value, row) {
return `${value}`
},
events: {
'click a': (e, value, row, index) => {
e.preventDefault();
this.$router.push(`/matches/${row.pos}`)
}
}
},
Another solution:
Just in case of JSON code having links instead of table config is adding click listener in mounted() and a well formatted dataset in JSON HTML link:
team: "<a href=\"/club/"+team.id+"\" data-to='{\"name\": \"team\",\"params\":{\"teamId\":"+ team.id+"}}'>"+ team.team+"</a> "+userCode
Here the listener:
mounted() {
window.addEventListener('click', event => {
let target = event.target;
if (target && target.href && target.dataset.to) {
event.preventDefault();
const url = JSON.parse(target.dataset.to);
//router.push({ name: 'user', params: { userId: '123' } })
this.$router.push(url);
}
});
}
This might be shorter solution for your issue :
routes = [
{
component : 'club',
name : 'club',
path : '/club/:teamid'
}
]
<a #click="$router.push({ name: 'club', params: { teamid: team.id}})">team.team</a>
While using Firestore, vuefire, vue-tables-2, I stuck getting document's id.
My data structure is as below.
Here is my code.
<v-client-table :columns="columns" :data="devices" :options="options" :theme="theme" id="dataTable">
import { ClientTable, Event } from 'vue-tables-2'
import { firebase, db } from '../../firebase-configured'
export default {
name: 'Devices',
components: {
ClientTable,
Event
},
data: function() {
return {
devices: [],
columns: ['model', 'id', 'scanTime', 'isStolen'],
options: {
headings: {
model: 'Model',
id: 'Serial No',
scanTime: 'Scan Time',
isStolen: 'Stolen YN'
},
templates: {
id: function(h, row, index) {
return index + ':' + row.id // <<- row.id is undefined
},
isStolen: (h, row, index) => {
return row.isStolen ? 'Y': ''
}
},
pagination: {
chunk: 5,
edge: false,
nav: 'scroll'
}
},
useVuex: false,
theme: 'bootstrap4',
template: 'default'
}
},
firestore: {
devices: db.collection('devices')
},
};
My expectation is devices should id property as vuefire docs.
But array this.devices didn't have id field even if I check it exist it console.
Basically, every document already has id attribute, but it's non-enumerable
Any document bound by Vuexfire will retain it's id in the database as
a non-enumerable, read-only property. This makes it easier to write
changes and allows you to only copy the data using the spread operator
or Object.assign.
You can access id directly using device.id. But when passing to vue-tables-2、devices is copied and lost id non-enumerable attribute.
I think you can workaround using computed property
computed: {
devicesWithId() {
if (!this.devices) {
return []
}
return this.devices.map(device => {
...device,
id: device.id
})
}
}
Then, please try using devicesWithId in vue-tables-2 instead.
I am using vue-i18n in a vue project. And I found it really confusing when using some data in vue data with i18n. Then if I change locale, that data is not reactive. I tried to return that data from another computed data but anyways it is not reactive because i18n is written in data. *My situation - * I want to show table with dropdown(list of columns with checkbox) above it. When user checks a column it will be showed in table if unchecks it won't. It is working fine until I change locale. After changing locale table columns is not translated but dropdown items is reactively translated and my code won't work anymore. Here is some code to explain better: In my myTable.vue component I use bootstrap-vue table -
template in myTable.vue
<vs-dropdown vs-custom-content vs-trigger-click>
<b-link href.prevent class="card-header-action btn-setting" style="font-size: 1.4em">
<i class="fa fa-th"></i>
</b-link>
<vs-dropdown-menu class="columns-dropdown">
<visible-columns :default-fields="columns" #result="columnListener"></visible-columns>
</vs-dropdown-menu>
</vs-dropdown>
<b-table class="generalTableClass table-responsive" :fields="computedFieldsForTable">custom content goes here</b-table>
script in myTable.vue
data(){
return {
fieldsForTable: [];
}
},
computed: {
computedFieldsForTable () {
return this.fieldsForTable;
},
columns() {
return [
{
key: 'id',
label: this.$t('id'),,
visible: true,
changeable: true
},
{
key: 'fullName',
label: this.$t('full-name'),,
visible: true,
changeable: true
},
{
key: 'email',
label: this.$t('email'),,
visible: true,
changeable: true
}
]
}
},
mounted () {
this.fieldsForTable = this.filterColumns(this.columns);
},
methods: {
filterColumns(columns = []) {
return columns.filter(column => {
if (column.visible) {
return column
}
})
},
columnListener ($event) {
this.fieldsForTable = this.filterColumns($event)
}
}
Can someone give me some advice for this situation ?
*EDIT AFTER SOME DEBUGGING: I think when filtering columns(in computed) and returning it for fieldsForTable inside filterColumns(columns) method, it actually returning array(of objects) with label='Label Name' not label=this.$t('labelName'). So after filtering the new array has nothing to do with vue-i18n. My last chance is reloading the page when locale changes.
Trying modify computedFieldsForTable as follows. You need to reference this.columns in computedFieldsForTable, so that Vue can detect the change of labels in this.columns.
computedFieldsForTable () {
return this.filterColumns(this.columns);
},
EDITED: put your this.columns in data. Then
columnListener ($event) {
this.columns = $event;
}
I hope i didn't misunderstand what you mean.
EDITED (again):
Maybe this is the last chance that I think it can work. Put columns in computed() still and remove computedFieldsForTable. Finally, just leave fieldsForTable and bind it on fields of <b-table>.
watch: {
columns(val) {
this.fieldsForTable = this.filterColumns(val)
}
},
method: {
columnListener ($event) {
this.fieldsForTable = this.filterColumns($event)
}
}
However, I think it is better and easier to reload page whenever local change. Especially when your columns have a more complex data structure.
When the SailsJS app loads a page, I have it pulling the id parameter from the url and loading a recipe from the database. The recipe object logs to console correctly, so I'm sure it's loading, but none of the Vue variables are rendering.
I'm loading the data in this controller action:
// api/controllers/recipes/view-single-recipe.js
module.exports = {
friendlyName: 'View single recipe',
description: 'Display "Single recipe" page.',
exits: {
success: {
viewTemplatePath: 'pages/recipes/single-recipe'
}
},
fn: async function (inputs, exits) {
const recipe = await Recipe.find({id: this.req.params.id}).populate('ingredients')
console.log(recipe) //logs the data correctly
return exits.success({
recipe: recipe
});
}
};
Then I'm atteming to access the recipe object in my view using VueJS:
<!-- views/pages/recipes/single-recipe.ejs -->
<div id="single-recipe" v-cloak>
<h1>{{recipe.name}}</h1> <!-- rendering as <h1></h1>
<!-- ... more stuff ... -->
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
Here's the data object that loads:
[{
ingredients: [
[Object],
[Object],
[Object],
[Object],
[Object]
],
createdAt: 1536016866419,
updatedAt: 1536016866419,
id: '5b8c169936f1df3439fa39c7',
name: 'Sweet Green',
ratingSweet: 2,
ratingTexture: 5,
ratingOverall: 4,
ratingColor: 5,
notes: 'Personal favorite, maybe needs more ginger',
owner: '5b8c16301cee97343513e184'
}]
Not sure if it matters, but here is the route:
'GET /recipes/single-recipe/:id': { action: 'recipes/view-single-recipe' }
And the URL being access is http://localhost:1337/recipes/single-recipe/5b8c169936f1df3439fa39c7
How do I access the data object properties in the view?
You should use findOne
// api/controllers/recipes/view-single-recipe.js
module.exports = {
friendlyName: 'View single recipe',
description: 'Display "Single recipe" page.',
exits: {
success: {
viewTemplatePath: 'pages/recipes/single-recipe'
}
},
fn: async function (inputs, exits) {
const recipe = await Recipe.findOne({
id: this.req.params.id
}).populate('ingredients')
return exits.success({ recipe: recipe });
}
};
Also note that inputs variable in fn are not being used.
And there need to be some handler if record is not exists.
The answer is that when using find() query, the results returned are an array. So if there is only one result, it needs to be accessed at the first result in the array [0]
// api/controllers/recipes/view-single-recipe.js
module.exports = {
// ...
fn: async function (inputs, exits) {
const recipe = await Recipe.find({id: this.req.params.id}).populate('ingredients')
console.log(recipe) //logs the data correctly
return exits.success({
recipe: recipe[0]
});
}
};
I'm using vue-js 2.3 and element-ui. This question is more specific to the MessageBox component for which you can find the documentation here
Problem
I'd like to be able to enter html message in the MessageBox
More specifically I would like to display the data contained in dataForMessage by using a v-for loop.
Apparently, we can insert vnode in the message but I have no idea where to find some information about the syntax.
https://jsfiddle.net/7ugahcfz/
var Main = {
data:function () {
return {
dataForMessage: [
{
name:'Paul',
gender:'Male',
},
{
name:'Anna',
gender:'Female',
},
],
}
},
methods: {
open() {
const h = this.$createElement;
this.$msgbox({
title: 'Message',
message: h('p', null, [
h('span', null, 'Message can be '),
h('i', { style: 'color: teal' }, 'VNode '),
h('span', null, 'but I would like to see the data from '),
h('i', { style: 'color: teal' }, 'dataForMessage'),
])
}).then(action => {
});
},
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
I think this is what you want.
methods: {
open() {
const h = this.$createElement;
let people = this.dataForMessage.map(p => h('li', `${p.name} ${p.gender}`))
const message = h('div', null, [
h('h1', "Model wished"),
h('div', "The data contained in dataForMessage are:"),
h('ul', people)
])
this.$msgbox({
title: 'Message',
message
}).then(action => {
});
},
}
Example.
You can also use html directly and convert to vnodes by using domProps:
const html = '<div><h1>Model wished</h1><div>The data contained in dataForMessage are:</div><ul><li>Paul Male</li><li>Anna Female</li></ul></div>'
const message = h("div", {domProps:{innerHTML: html}})
(The above is simplified without the loop. Just to get the idea)
Fiddle