[Vue.js] Get autocomplete input value to a hidden input Vue.Js Subscribe to RSS

I use https://santiblanko.github.io/vue-instant/ for autocompletion with Vue.

It works as I expected, except I cannot post the value inside the ‘input’ value to a form.

When I submit the form, the value inside the input is not posted to my backend server.

So that there is to create a hidden value when I submit so that I can read that input value.

How to do this. I just want the form and the value to be submitted as I cick magnifier icon.

<!– TODO: Missing CoffeeScript 2 –>

<form action=”https://www.google.com" method=”GET”>
<div id=”app”>
<label>{selectedEvent}</label>
<vue-instant :suggestonallwords=”true” :suggestion-attribute=”suggestionAttribute” v-model=”value” :disabled=”false” @input=”changed” @click-input=”clickInput” @click-button=”clickButton” @selected=”selected” @enter=”enter” @key-up=”keyUp” @key-down=”keyDown”
@key-right=”keyRight” @clear=”clear” @escape=”escape” :show-autocomplete=”true” :autofocus=”false” :suggestions=”suggestions” name=”customName” placeholder=”custom placeholder” type=”google”></vue-instant>
</div>
</form>

Solution :

If I understand correctly, you want to post the suggested value to the server inside a form data object? If that’s right, you can alter the clickButton method as follows.

clickButton: function() {
this.selectedEvent = ‘click button’;
var formData = new FormData();
formData.append(“selectedMovie”, this.value);
axios({
method: ‘post’,
url: ‘/yourapi/endpoint/‘,
data: {
formData:formData
}
}).then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
});
}

Solution 2:

You can add the following to the html of the form element v-on:submit.prevent=”send”. And then add a send function to the component’s methods in which you access this.value and do whatever you need to do with it.

[Vue.js] How to bind css class in vue js template within a v-for loop? Subscribe to RSS

How do I name my td class the name of the step in this example?

<td v-for=”steps in item.steps” v:bind:class=”item.steps.name”>
{ item.steps.name }
</td>

In this example, my class gets literally named items.steps.name rather than the return value. Everything else works.

Solution :

Use v-bind:class not v:bind:class

Solution 2:

That’s cause you are looping over item.steps with each iteration named steps and you use the variable you are looping over in the class-binding.

Try steps.name instead.

[Vue.js] render a different component based on a condition within a loop Subscribe to RSS

I created a simple Minesweeper game and when it comes to the decision, which cell to render there are three possibilities:

Unrevealed cell
Revealed mine cell
Revealed neutral cell

I created a row component that renders all the cells contained by the row.

</div>
</template>

there is to add the conditional statements now. From the docs there is a is tag so I tried to extend my code to

but when mixing JavaScript code with HTML code and this is invalid. All to do is something like this pseudo code

How can I achieve this?

Solution :

You can achieve this inside methods.

import RevealedMineCell from …
import RevealedNeutralCell from …
import UnrevealedMineCell from …

…
methods: {
getProps (cell) {
if(cell.revealed){
if(cell.isMine) {
return {};
} else {
return {
mineNeighbours: cell.mineNeighbours
};
}
} else {
return {
unrevealedCell: cell,
…
…
cellClicked: this.onCellClicked
…
…
};
}
},
getCellComponent (cell) {
if(cell.revealed){
if(cell.isMine) {
return RevealedMineCell;
} else {
return RevealedNeutralCell;
}
} else {
return UnrevealedCell;
}
}
…

[Vue.js] How to center the text on vuetify footer? Subscribe to RSS

when trying to create a Vuetify footer and when running into some issues. there is made a Codepen here https://codepen.io/anon/pen/mYazWv.

when new to vuetify so i’m trying to see how i can put the title in the center and push the checkbox to the right along with the buttons with using too many
spacers

when following the official vuetify docs https://vuetifyjs.com/en/components/footer

<v-footer
height=”auto”
color=”primary lighten-1”
\>
<v-card class=”flex flat tile”>
<v-card-title class=”primary lighten-1”>
<v-layout justify-center row wrap>

<strong class=”subheading white–text”>
Some Random Text
</strong>
</v-layout>

<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>

<v-checkbox dark label=”Click Me”></v-checkbox>
<v-btn v-on:click=”saveClicked”>
<v-icon>save</v-icon> Save
</v-btn>
<v-btn>
<v-icon>close</v-icon> Cancel
</v-btn>
</v-card-title>
</v-card>

The v-spacer pushes the buttons in place but doesn’t seem to apply on checkbox. Any help will be appreciated.

Solution :

Add grow class to <v-layout>.
Add shrink class to <v-checkbox>.

Updated pen.

Note: to align the title to left, remove flex and justify-center classes from <v-layout>.

[Vue.js] Cannot get cookie in vue-router to work. Undefined this Subscribe to RSS

The problem is that I cannot get cookie in vue-router. When I try to do this: this.$cookie.get(‘token’); I get this undefined. Even though I can use this.$cookie in vue.js components. This is my code snippet:

Vue-Router:

This is a function to check if I get token from cookie (but it doesnt work):

function isLoggedIn (to, from, next) {
console.log(this.$cookie.get(‘token’));
}

And this is the route and I use that isLoggedIn in it:

{
path: ‘/‘,
name: ‘login’,
component: Login,
beforeEnter: isLoggedIn()
},

Maybe someone knows how to get that cookie ? It it setted up in vue.js component correctly just don’t know how to pass it to vue.js router.

EDIT
So by using Vue.cookie.get(‘token’); I get that next is not a function. This is the current function:

function isLoggedIn (to, from, next) {
if(Vue.cookie.get(‘token’)) {
next({name: ‘game’});
} else {
next();
}
}

Okay so when I added this function directly into route like this it worked:

{
path: ‘/‘,
name: ‘login’,
component: Login,
beforeEnter: (to, from, next) => {
if(Vue.cookie.get(‘token’)) {
next(‘/game’);
} else {
next;
}
}
},

Solution :

If you are using the vue-cookie plugin from npm then you will need to use this syntax outside of components:

function isLoggedIn (to, from, next) {
console.log(Vue.cookie.get(‘token’));
}

With regards to the next is not a function error, this is because you are invoking the function with no arguments, isLoggedIn(), rather than passing the function reference, isLoggedIn, which will be invoked by the router with the appropriate arguments.

Try this instead:

{
path: ‘/‘,
name: ‘login’,
component: Login,
beforeEnter: isLoggedIn // No parentheses here
},

Palais ioussoupov: voyagepeter.com

I hope this helps.

Solution 2:

If you look at the typings, you’ll see that both to and from are Route’s. Here’s their interface declaration:

export interface Route {
path: string;
name?: string;
hash: string;
query: Dictionary<string | (string | null)[]>;
params: Dictionary<string>;
fullPath: string;
matched: RouteRecord[];
redirectedFrom?: string;
meta?: any;
}

If look at the Definition of BeforeEnter:

beforeEnter?: NavigationGuard;

If you look at the Definition of NavigationGuard:

export type NavigationGuard<V extends vue.js = Vue> = (
to: Route,
from: Route,
next: (to?: RawLocation | false | ((vm: V) => any) | void) => void
) => any

So as we can see, the beforeEnter returns a closure that exposes 3 methods to us: (to, from, next).

As we can see the typings of both to and from are just Route Interfaces and next is a function that we pass arguments into, we can safely determine that the scope of this is indeed, undefined.

So you can either define it in the meta of the Route declaration and access it with this.$meta.cookies, or you can import the cookie package directly and use it with cookies.get(‘token’) or you can augment the return type of the beforeEnter method:

beforeEnter: (to, from, next) => isLoggedIn(to, from, next, $cookies)

You still, cannot, use the in component guards as they do not expose this to you because they execute before the component has been created

[Vue.js] How to pass vuejs html template as slot and access from data or method Subscribe to RSS

there is a component like this:

<my-dropzone value:”….”>
<h1>upload</h1>
<p>the files</p>
</my-dropzone>

and my vuejs component is:

<script>
….

export default {
props:{
….
},
components: {
vueDropzone: vue2Dropzone
},
data() {
return {
arrayFiles: [],
dropzoneOptions: {

….
dictDefaultMessage: // <—— to assign slot data here
,
….
},
mounted() {
…..

},
methods: {
…..
},
computed: {
…..
}
}
</script>

Now to get slot html data and assign to some local variable of component and also use in method. Is it possible? Is there any better solution to pass html to data variable

Solution :

You can use Vue.js vm.$slots to access the slot children as HTML nodes. It is the only recommended way. Official Vue.js docs really explain it well.

You can use render() function for the components instead of template. Slots are designed to be used effectively with a render function. Without render function, using vm.$slots is not really that useful.

Long explanation:

vue.js slots are not designed to work the way you need. Imagine slots as a rendering area. Also, a slot doesn’t really contain HTML as a string. It is already passed from virtual-dom and rendered as HTMLElements on screen. By the time code is processed, html as a string has transformed into a render function.

Alternately, If you need to really access the underlying HTML nodes, then consider using plain DOM API like querySelector(), etc. As far as the $refs is concerned, Content within the slot is owned by the parent component and thus you cannot use it.

[Vue.js] How do I combine vue, i18n and markdown pages? Subscribe to RSS

Im trying to use markdown pages as translations in vue.

This is my attempt to get it working:

Home.vue

export default {
name: ‘home’,
components: {
Page
}
}
</script>

<i18n>
{
“en”: {
“page”: “<h1>Welcome to my homepage!</h1><br>Doesn’t this look awesome?”
},
“fr”: {
“page”: “Non? <Page />”
}
}
</i18n>

BonjourLeMonde.md

# Bonjour tout le monde!

Bienvenue pour mon site de web.

Unfortunately, while html tags can be read, imports are not being loaded.

Does anyone know a solution to this?

Link to example code.

Solution :

You can’t use v-html with vue.js component. From the document v-html:

Note that the contents are inserted as plain HTML - they will not be compiled as vue.js templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.

However you can still achieve this by using dynamic component and compile function.

Render.vue

export default {
props: {
html: String
},

computed: {
result () {
return Vue.compile(this.html)
}
}
}
</script>

Then use it instead of v-html:

Register the components as global components (If you want to register locally you can pass the components into Render and register it with the result of compile function):

Vue.component(‘Post’, Post)

Note: Vue.compile only available in the full build you have to add runtimeCompiler: true in vue.config.js.

Solution 2:

Solved by using VueSimpleInlineTranslation.

Home.md

export default {
name: ‘home’,
components: {
translate: VueSimpleInlineTranslation,
PageEN,
PageFR
}
}
</script>

[Vue.js] How to add vanilla JavaScript to vue.js project? Subscribe to RSS

Good Day, I’m very new to vue.js and want a navbar, which ist transparent by default, but changes its background on scrolling. Unfortunately, it does not work. I tried a fe solutions, but none of this worked. So this JavaScript code is an example from Stack Overflow, which works in a Fiddle. If you need more information and/or code, please let me know.

Navigation.vue

<template>
<div id=”navigation”>
<nav class=”nav-items”>
<router-link class=”item” to=”/home”>Home</router-link>
<router-link class=”item” to=”/about”>About</router-link>
<router-link class=”item” to=”/japan”>Japan</router-link>
</nav>
</div>
</template>

import scroll from ‘../assets/js/scroll.js’;

</script>

scroll.js

const navbar = document.querySelector(‘#navigation’)

window.addEventListener(‘scroll’, function(e) {
const lastPosition = window.scrollY
if (lastPosition > 50 ) {
navbar.classList.add(‘colored’)
} else if (navbar.classList.contains(‘colored’)) {
navbar.classList.remove(‘colored’)
} else {
navbar.classList.remove(‘colored’)
}
})

navigation.scss

FYI: I’ve removed uneccessary code here.

#navigation {
background: transparent;

.colored {
background: #fff;
transition: 0.3s;
}

}

Solution :

Note: To view how to import custom code in a vue.js component (general case), scroll down past the last <hr>.

vue.js is a JavaScript framework and therefore you can insert vanilla code anywhere in it and it will run perfectly fine.

IMHO, you issue is not about importing vanilla code. It’s about running it at the correct moment.

You have to run the code inside mounted() hook, because that’s when #navigation exists in DOM:

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component(‘navigation’, {
template: ‘#navigationTemplate’,
mounted() {
window.addEventListener(‘scroll’,
() => document.querySelector(‘#navigation’)
.classList.toggle(‘colored’, window.scrollY > 50)
)
}
})

new Vue({
el: ‘#app’
});

#app {
min-height: 200vh;
background: url(“https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
}

#navigation {
background: transparent;
position: fixed;
top: 0;
padding: 1rem;
transition: 0.3s;
width: 100%;
box-sizing: border-box;
color: white;
}

#navigation.colored {
background: rgba(255, 255, 255, .85);
color: black;
}

body {
margin: 0;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script id=”navigationTemplate” type=”text/template”>
<div id=”navigation”>
<nav class=”nav-items”>
<a class=”item” to=”/home”>Home</a>
<a class=”item” to=”/about”>About</a>
<a class=”item” to=”/japan”>Japan</a>
</nav>
</div>
</script>
<div id=”app”>
<navigation />
</div>

the scroll.js can safely be written as:

window.addEventListener(‘scroll’,
() => document.querySelector(‘#navigation’)
.classList.toggle(‘colored’, window.scrollY > 50)
)

the SCSS seems incorrect:

#navigation {
.colored {
declaration
}
}

will apply declaration to any element with a class of .colored that’s inside an element with the id of navigation. But the code toggles the class colored on #navigation. Therefore the SCSS should look like this:

#navigation {
&.colored {
declaration
}
}

Might not seem like much, but the & makes the code apply (or not).

You probably want to apply transition to #navigation, as it should apply when it has the colored class and when it doesn’t. If you don’t, the return transition (from .colored to :not(.colored)) will not be animated.

For the record and to also answer the initial question, the proper way to import custom code into a vue.js component is:

a) export the code as a function:
(in scroll.js)

export function menuScroll = function() {
/* the custom code here */
}

b) import it:
(in the component)

import { menuScroll } from ‘path/to/scroll’

c) run it exactly where you need it:
(i.e: in mounted)

export default {
name: ‘navigation’,
mounted() {
menuScroll();
}
}

Obviously, you want to rename the function in accordance with its purpose/role and the project’s naming conventions.

Last, but not least, if the function needs to take params, you might want to use it as a method:

export function someName = function(…args) {
/** do stuff with args **/
}

… and, in component:

import { someName } from ‘path/to/it’

export default {
name: ‘whatever’,
methods: {
someName,
/* more methods… */
}
}

[Vue.js] How do undefined components work in Vue.js - Vue.js + Pug Subscribe to RSS

I was just going through some Vue.js code right HERE. And came across the following Vue.js + PUG code , basically its just PUG templating:

menu-dropdown.task-dropdown(
v-if=”!isRunningYesterdailies”,
:right=”task.type === ‘reward’”,
ref=”taskDropdown”,
v-b-tooltip.hover.top=”$t(‘options’)”
)

Now when something like below is in PUG i understand that a div with the classes will be outputted.

.d-flex.justify-content-between

But what about when something is not preceded by a . ? What does it mean ?

Like what exactly is menu-dropdown , I was thinking its a component but when i look to the bottom of the file , i see no component named .menu-dropdown , IE i see only the following components loaded:

components: {
approvalFooter,
approvalHeader,
MenuDropdown,
},

So where is .menu-dropdown coming from and what exactly is it ?

Solution :

It looks like without the leading dot, pug renders a component

<menu-dropdown class=”task-dropdown” …more data here../ ></menu-dropdown>

vue.js internally automatically creates an alias from user-name to UserName, and vice versa, so you can use whatever you like. Its generally best to use UserName in the JavaScript, and user-name in the template.

[Vue.js] Vue Tables 2 Custom Headings Names Subscribe to RSS

when newbie in the VueJS world, when trying to create a simple CRUD application.
We’ve decided to use the vue-tables-2 library, it works fine with the following code:

<template>
<div id=”users”>
<v-server-table url=”users” :columns=”columns”>
</v-server-table>
</div>
</template>
<script>
export default {
name: ‘UsersContainer’,
components: {},
data() {
return {
columns: [“fullName”, “age”, “city”]
}
},
}
</script>

It shows data, however headings are just properties in the camel case.

I need to add custom heading, for example, FullName should be Name
Is it possible to change headings?

Solution :

It is easily achievable. According to the official documentation, you can provide options to the table component.

In the case you can modify the snippet in a next way:

<template>
<div id=”users”>
<v-server-table url=”users” :options=”options” :columns=”columns”>
</v-server-table>
</div>
</template>
<script>
export default {
name: ‘UsersContainer’,
components: {},
data() {
return {
columns: [“fullName”, “age”, “city”],
options: {
headings: {
fullName: ‘Name’,
age: ‘Age’,
city: ‘City’
}
}
}
},
}
</script>

As you can see from the snippet above we are returning an object where properties are the item properties and values are desired headings.

Top 10 Web Skills

html5, css3, javascript, node.js, etc