link1096 link1097 link1098 link1099 link1100 link1101 link1102 link1103 link1104 link1105 link1106 link1107 link1108 link1109 link1110 link1111 link1112 link1113 link1114 link1115 link1116 link1117 link1118 link1119 link1120 link1121 link1122 link1123 link1124 link1125 link1126 link1127 link1128 link1129 link1130 link1131 link1132 link1133 link1134 link1135 link1136 link1137 link1138 link1139 link1140 link1141 link1142 link1143 link1144 link1145 link1146 link1147 link1148 link1149 link1150 link1151 link1152 link1153 link1154 link1155 link1156 link1157 link1158 link1159 link1160 link1161 link1162 link1163 link1164 link1165 link1166 link1167 link1168 link1169 link1170 link1171 link1172 link1173 link1174 link1175 link1176 link1177 link1178 link1179 link1180 link1181 link1182 link1183 link1184 link1185 link1186 link1187 link1188 link1189 link1190 link1191 link1192 link1193 link1194 link1195 link1196 link1197 link1198 link1199 link1200 link1201 link1202 link1203 link1204 link1205 link1206 link1207 link1208 link1209 link1210 link1211 link1212 link1213 link1214 link1215 link1216 link1217 link1218 link1219 link1220 link1221 link1222 link1223 link1224 link1225 link1226 link1227 link1228 link1229 link1230 link1231 link1232

[Vue.js] Vuetify breadcrumbs scoped slot

I’m trying to incorporate breadcrumbs into my vuetify app however this is my code:

<v-breadcrumbs divider=”>”>
<v-breadcrumbs-item
v-for=”breadcrumb in breadcrumbs”
exact
:to=”breadcrumb.to”>
{ breadcrumb.text }
</v-breadcrumbs-item>
</v-breadcrumbs>

And then I get this warning in the console. Im not really sure what it means..

default slot’ is deprecated, use ‘:items and scoped slot “item”‘ instead

If i try the default template from vuetify docs: <v-breadcrumbs :items=”items”> it only allows for a href not a :to which is what I need.

Can anyone help me out.

Solution :

It seems that Veutify now provides an item scoped slot that can be used to customize breadcrumbs. Looking at their example here I think what you need to do is the following ..

<v-breadcrumbs :items=”breadcrumbs” divider=”>”>
<v-breadcrumbs-item
slot=”item”
slot-scope=”{ item }”
exact
:to=”item.to”>
{ item.text }
</v-breadcrumbs-item>
</v-breadcrumbs>

Solution 2:

alternative is use a method with a click event

<template>
<v-breadcrumbs divider=”>”>
<v-breadcrumbs-item
v-for=”breadcrumb in breadcrumbs”
exact
@click=”goTo(breadcrumb.to)”>
{ breadcrumb.text }
</v-breadcrumbs-item>
</v-breadcrumbs>
</template>

<script>
export default {
methods: {
goTo (payload) {
this.$router.push(payload)
}
}
}
</script>

[Vue.js] Force download image file that's returned as http response using laravel, vue, axios and intervention image

when trying to set up a media asset database using Laravel, Vue, Axios and Intervention image.
the user to be able to set a desired image height and width before downloading an image. This is then sent to the controller using an axios post-request. Inside the controller, intervention image is working its magic(k) and returning my resized file as a response.

Now the image that’s being returned as a response to trigger a download. What do I need to do with my axios-response?

Here’s what I currently have:

Axios-Request:

resize(file) {
this.file = file;

let formData = new FormData();
formData.append(‘imageHeight’, this.imageHeight);
formData.append(‘imageWidth’, this.imageWidth);

axios.post(‘files/resize/‘ + file.id, formData).then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
this.errors = error.response.data.errors;
this.showNotification(error.response.data.message, false);
this.fetchFile(this.activeTab, this.pagination.current_page);
});
}

Controller:

public function resize($id, Request $request)
{
$file = File::where(‘id’, $id)->where(‘user_id’, Auth::id())->first();

$originalImage = $file->getName($file->type, $file->name, $file->extension);
$originalImagePath = Storage::get($originalImage);

$imageHeight = $request[‘imageHeight’];
$imageWidth = $request[‘imageWidth’];

if ($img = Image::make($originalImagePath)) {
return $img->resize($imageWidth,$imageHeight)->response();
}
}

Solution :

You’ll want the Content-Disposition response header to be attachment rather than inline.

http://image.intervention.io/use/http

[Vue.js] Initialize vue after static data loaded

there is data that does not need a live binding and comes from a remote source. This is a JSON file generated by the server from some admin, and may be updated occasionally.

there is a vue.js instance use that data in as a custom option to avoid unnecessary reactivity binding.

I cannot import into the .vue.js file itself in the build as it won’t be built every time the data changes on the server.

If I’m loading each file (the store.json and main.js) there is a race condition here where the data might not yet be loaded when the main.js is loaded, and therefore my custom option would be empty.

Is there a vue.js pattern for not initializing until some data is present?

Tried:

export default {
store: “”,
mounted(){
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === XMLHttpRequest.DONE) {
this.store = JSON.parse(httpRequest.responseText);
console.log(this.store) //shows the expected return, but obviously no update to the page
}
}
httpRequest.open(“GET”, “/store.json”, true);
httpRequest.send();
}
};

Solution :

Ive had a similar case once with the need to adjust some presets without rebuilding the project every time. I ended up moving the vue.js object that rendered the app inside an async Axios function. Of course it affects loading time, since it waits for the JSON file to be loaded, in my case this was less important. This is a summary of such a setup.

axios.get(‘./config.json’)
.then(function(response) {
let config = response.data
//commit data to vuex store for example

new Vue({
store,
render: h => h(App)
}).$mount(‘#app’)
})
.catch(function(error) {
console.log(error)
})

[Vue.js] Styling Vuetify selectors

The Vuetify component for a selector is:

<v-select
:items=”items”
label=”Standard”
\></v-select>

But when the selector is active, many nested components appear (on inspect), for example, the dropdown menu itself, menu__content. How would I go about styling it? For the “visible” Vuetify component v-select, I can manually add a class, and style it in css directly. However, I can’t do this for the hidden components.

I’ve tried to style with the inspect-given class, “.menu__content”, but it appears it doesn’t work: https://jsfiddle.net/agreyfield91/tgpfhn8m/936/.

How would I style these components manually in css? Is there something fundamental about vuetify I’m missing?

Solution :

it appears it doesn’t work

If you inspect it again, you will see that it does “work”, however it appears to be overridden by something:
.menu__content {
top: 200px;
}

Is there something fundamental about vuetify I’m missing?

Apparently not in this case, you are only missing CSS Specificity.

If you inspect the element you will notice that it has some inline-style presumably added by some JavaScript that you can’t change at hand.
From link above:

Inline styles added to an element (e.g., style=”font-weight:bold”)
always overwrite any styles in external stylesheets, and thus can be
thought of as having the highest specificity.

Solution(s)

Afaik the only way to override inline-style in external-stylesheet is by using !important, however it seems to not be the best practice:

.menu__content {
top: 200px !important;
}

So perhaps another things you could do are:

see if there is a variable in vuetify config with regards to the css property somewhere which you can change (this would probably apply to all components of the same type tho)
see if there is a component property in vuetify API which you can use to achieve style change (this would probably be the best solution if available)
change inline-style property manually with the own script
change style for another property which would yield the same desired outcome

Note:
If you go with the CSS solution, and style appears not to be applied, see more about deep selectors.

[Vue.js] Optional param in vuejs router

I need to route to a certain component in two ways - one with a param, one without. there is searched for optional params and somehow can’t find much info.

So my route:

{
path: ‘/offers/:member’,
component: Offers,
name: ‘offers’,
props: true,
meta: {
guest: false,
needsAuth: true
}
},

When I call it with the param programmatically, all is fine

this.$router.push({ path: /offers/1234 });

However I also need to call it via nav like this

<router-link to=”/offers”>Offers</router-link>

The offers component accepts the prop

props: [‘member’],

And component used as such

<Offers :offers=”data” :member=”member”></Offers>

Now the ugly way I’ve managed to get it working is duplicating the route and making one of them not take props:

{
path: ‘/offers’,
component: Offers,
name: ‘offers’,
props: false,
meta: {
guest: false,
needsAuth: true
}
},

It actually works, but i’m not happy with it - also in dev mode vuejs is warning me [vue-router] Duplicate named routes definition: { name: “offers”, path: “/offers” }

Surely there’s a way to do optional param in the component call :member=”member” ?

Solution :

Just adding a question mark ? will make it optional.

{
path: ‘/offers/:member?’,

},

It works for vue.js Router 2.0 onward.

Source: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

[Vue.js] jQuery plugin in Vue component Cannot pass value to prop

there is added the jquery redactor plugin in a vue.js component. The plugin is working fine but I need to access the html so I can see it in Vue.

there is tried everything I can think of, methods, computed properties but I can’t find a way. It’s particularly tricky because Redactor adds new html into the dom, and I need to get the data from the added html.

Currently when getting this error, this.$emit is not a function. I need to get the html value of .redactor-editor into the prop so it will be available in the vue.js data. The var textContent prints out correctly in console but I can’t get that to show in the prop. Any help is greatly appreciated.

Component

<template>
<div>
<textarea class=”form-control question-create-editor” id=”question_description” placeholder=”Go wild with all the details here - make image upload work” rows=”3”>
</div>
</template>

<script>
export default {
props: [‘redactorValue’],
mounted: function(){
$(‘#question-create-form .question-create-editor’).redactor({
imageUpload:’/urlGoesHereBro/‘,
plugins: [‘video’, ‘imagemanager’, ‘counter’, ‘limiter’],
buttonsHide:[‘html’, ‘formatting’, ‘deleted’, ‘indent’, ‘outdent’, ‘alignment’, ‘horizontalrule’]
});
},
computed: {
redactorValue: function(){
$(‘#question-create-form .redactor-editor’).on(‘keyup’, function(){
var textContent = $(‘#question-create-form .redactor-editor’).html();
console.log( ‘textContent = ‘ + textContent );
this.$emit(‘redactorValue’, textContent);
});
}
}
};

HTML

<vueredactor></vueredactor>

Solution :

The this.$emit is not a function issue is because this is pointing to the window.

Also I moved the keyup definition into mounted.

export default {
data(){
return {
redactorValue: null
}
},
mounted: function(){
$(‘#question-create-form .question-create-editor’).redactor({
imageUpload:’/urlGoesHereBro/‘,
plugins: [‘video’, ‘imagemanager’, ‘counter’, ‘limiter’],
buttonsHide:[‘html’, ‘formatting’, ‘deleted’, ‘indent’, ‘outdent’, ‘alignment’, ‘horizontalrule’]
});

$(‘#question-create-form .redactor-editor’).on(‘keyup’, function(){
this.redactorValue = $(‘#question-create-form .redactor-editor’).html();
}.bind(this));
}
};

Solution 2:

Just to add to @BertEvans superb answer. Here is a solution that adds props and v-model back into the mix. This allows you to get the redactor content as a value and have access to that data in the root.

Component

<template>
<div>
<textarea class=”form-control question-create-editor” id=”question_description” placeholder=”Go wild with all the details here - make image upload work” rows=”3”>
</div>
</template>

<script>
export default {
props: [‘value’],
data(){
return {
redactorValue: null
}
},
mounted: function(){
$(‘#question-create-form .question-create-editor’).redactor({
imageUpload:’/urlGoesHereBro/‘,
plugins: [‘video’, ‘imagemanager’, ‘counter’, ‘limiter’],
buttonsHide:[‘html’, ‘formatting’, ‘deleted’, ‘indent’, ‘outdent’, ‘alignment’, ‘horizontalrule’]
});

$(‘#question-create-form .redactor-editor’).on(‘blur’, function(){
this.redactorValue = $(‘#question-create-form .redactor-editor’).html();
this.$emit(‘input’, this.redactorValue);
}.bind(this));
}
};
</script>

JS

Vue.component(‘vueredactor’, require(‘./components/redactor.vue’));

var App = new Vue({
el: ‘#app’,
data: {
redactorContent: null
}
});

HTML

<div id=”app>
<vueredactor v-model=”redactorContent”></vueredactor>
</div>

Solution 3:

Here my working VueJS 2 component with Redactor Editor 3 from Imperavi.
Support multi-editor in same view, but editor need unique name/id.
Not require jQuery library.

RedactorEditor.vue

<template>
<div class=”redactor”>
<textarea ref=”redactorContainer” :id=”id” :value=”value”></textarea>
</div>
</template>
<script>
import ‘addons/redactor/css/redactor.css’
import ‘addons/redactor/redactor’
//import ‘addons/redactor/plugins/wordslimiter/wordslimiter’
//import ‘addons/redactor/plugins/beyondgrammar/beyondgrammar’

export default {
name: ‘redactor-editor’,
props: {
value: {
required: true,
twoWay: true
},
id: {
type: String,
default: ‘editor’
},
minHeight: {
type: String,
default: ‘300px’,
},
maxHeight: {
type: String,
default: ‘800px’,
},
buttons: {
type: Array,
default: () => [‘html’, ‘format’, ‘bold’, ‘italic’, ‘deleted’, ‘lists’, ‘link’]
},
plugins: {
type: Array,
default: () => []
},
wordslimiter: {
type: Number,
default: 0
},
beyondgrammarSettings: {
type: Object,
default: null
}
},
data () {
return {
propValue: this.value
}
},
created () {
this.isChanging = false;
this.app = null;
},
mounted () {
var me = this;
this.app = $R(this.$refs.redactorContainer, {
style: true,
breakline: false,
shortcodes: false,
pasteClean: true,
autoparseImages: false,
autoparseVideo: false,
multipleUpload: false,
clipboardUpload: false,
pasteLinkTarget: ‘_blank’,
placeholder: ‘Write the text here …’,
minHeight: this.minHeight,
maxHeight: this.maxHeight,
buttons: this.buttons,
plugins: this.plugins,
wordslimiter: this.wordslimiter,
beyondgrammar: this.beyondgrammarSettings,
callbacks: {
start: function() {
// set initial data
this.source.setCode(me.propValue);
},
blur: function (e) {
// keyup not work with last typed text, fix sync with v-model by using blur
if (!me.isChanging) {
me.isChanging = true;
var code = this.source.getCode()
me.propValue = (code === null || code.length === 0 ? null : code);
me.$emit(‘input’, me.propValue);
me.$nextTick(function() {
me.isChanging = false;
});
}
}
}
})
},
destroyed () {
this.app = $R(this.$refs.redactorContainer)
if (this.app) {
this.app.destroy()
}
}
};
</script>

App.vue

import vue.js from ‘vue’
import RedactorEditor from ‘./components/RedactorEditor.vue’

// app
const app = new Vue({
el: ‘#my-app’,
data: {
editorButtons: [‘undo’, ‘redo’, ‘bold’, ‘italic’, ‘lists’, ‘link’],
editorPlugins: [],
beyondgrammarSettings: {}
editorHTMLContent: ‘’,
},
components: {
RedactorEditor
}
}

HTML usage

<redactor-editor
v-model=”editorHTMLContent”
:text-value=”editorHTMLContent”
:id=”‘editor_1”
:name=”‘editor_1”
:plugins=”editorPlugins”
:buttons=”editorButtons”
\></redactor-editor>

Example with custom Validator using vee-validate: https://gist.github.com/matinfo/52214f7f34ce6b746b483f0f92e6b5e5

[Vue.js] Vuejs table with dynamic columns connectted to flask API

when building a web application using Flask, SQLAlchemy and Vuejs. there is built an API to pass data from my database to be displayed in a table, built as a Vuejs component. my table component to be as generic as possible so I reuse it in different places.
For my first attempt, my API returns data as follows:

data = [
{
firstName: Joe,
lastName: Bradley,
email: joe@company.com
},
{
firstName: Mary,
lastName: Kelly,
email: mary@company.com
},
{etc….}
]

Right now my vue.js table component has column headings hard coded in but, the table component to be able to dynamically change the number of columns based on what data it receives. I dont want the headings to be hard coded. I might have a different table that displays 4 totally different columns of data. How should I set the column headings in the vue.js component?

Some ideas I had:

Include a list of columns headings in the API response so that the
table know what headings to use?
Make a separate API end point that returns a mapping of column
headings to database field names.
Just hard code the headings into the vue.js table and define a new table
component for each time to display a different data set.

Can anybody offer any best practise advice for a situation like this? Im self taught and pretty new to this as you have probably gathered from the question. Thanks in advance!

Solution :

You could take one item from the returned data and check its keys in order to get the headers of the data table :

let headers=Object.keys(this.users[0]);

Full example

new Vue({
el: ‘#app’,
data: {
users: [],
headers: []
},
methods: {
getData() {
axios.get(‘https://jsonplaceholder.typicode.com/users')
.then((response) => {
this.users = response.data;
this.headers = Object.keys(this.users[0]);
})
}
}
})
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>

<head>
<meta charset=”utf-8”>
<title></title>
<script src=”https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src=”https://unpkg.com/axios/dist/axios.min.js"></script>
<script src=”https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
<link type=”text/css” rel=”stylesheet” href=”//unpkg.com/bootstrap/dist/css/bootstrap.min.css” />

</head>

<body>
<div id=”app”>
<button @click=”getData” class=”btn btn-primary” type=”button”>getData</button>
<table class=”bordered”>
<thead>
<tr>
<th v-for=”h in headers”>{h}</th>
</tr>
</thead>
<tbody>
<tr v-for=”user in users”>
<td v-for=”d in user”>{d}</td>
</tr>
</tbody>
</table>
</div>
</body>

</html>

[Vue.js] What is v-bind in vue

when starting with vue.js and following the video tutorial by Traversy Media on Youtube

There he have used v-bind but I didn’t proper explained what are they (or at-least when unable to get it)

For some reason, I still find documentation slightly hard to comprehend.

So this is what we are doing.

<template>
<div id=”app”>
<p>{msg}</p>
<Todos v-bind:todos=”todos” />
</div>
</template>

<script>
import Todos from “./components/todo.vue”;
let todo = [
{
name: “Rohit”,
title: “Full Stack Developer”
},
{
name: “Varun”,
title: “head of marketing”
},
];

export default {
name: “app”,
components: {
HelloWorld,
Todos
},
data() {
return {
msg: “hello”,
todos: todo
};
}
};
</script>

Question:1 Can someone please comprehend this piece of code

<Todos v-bind:todos=”todos” />

like what is v-bind and why we are keeping value of todos equal to string? (I understand that ultimately he is passing todos to child component as props)

And then in todo.vue, he is doing something like this

<template>
<div v-bind:key=”todo.id” v-for=”todo in todos”>
<h3>{todo.title}</h3>
</div>
</template>

<script>
export default {
name: “Todos”,
props: [“todos”]
};
</script>

Question:2 This is where things get pretty scary for me. To start,
In export default, why would he used an array in props? props: [“todos”]? from the boiler plate code where they pass a string they just did something like this props: {msg: String} so why props: [“todos”] here?

export default {
name: “HelloWorld”,
props: {
//We are defining the message type here
msg: String
}
};

Question 3: Lastly in this line right here

<div v-bind:key=”todo.id” v-for=”todo in todos”>
<h3>{todo.title}</h3>

I understand the reason behind doing this v-bind:key=”todo.id” but then again what is v-bind? where do we use it?

Solution :

Q1

In vue.js you can pass props to child components. If you would have used: todos=”todos”. todos prop would be equal to the string todos however with v-bind:todos or in short :todos it makes the prop the javascript variable todos. Which is the todos from the data function

Q2

In vue.js you can reference the props in different ways. Declaring them in an array is just shorter but has a drawback which is that you can’t validate the props. When declaring the props in an object you can specify the type of the prop eg. String, Array, Object etc. It’s also possible to declare a default and specifiy required props.

props: {
msg: {
type: String,
required: true,
default: ‘’
}
}

Q3

The example provided won’t work as there is no id in the let todo just name and title. So what would work is:

<div v-bind:key=”i” v-for=”(todo, i) in todos”>

Again it’s possible to just use :key=”i”. The key could be seen as an id. It’s used so vue.js knows which element is which in a loop.

[Vue.js] Vue + Webpack - Specifying the server for hot reload

So there is the following config file for use with webpack-dev-server:

‘use strict’
const { VueLoaderPlugin } = require(‘vue-loader’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
mode: ‘development’,
entry: [
‘./src/app.js’
],
module: {
rules: [
{
test: /\.vue$/,
use: ‘vue-loader’
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: ‘index.html’,
template: ‘index.html’,
inject: true
})
],
}

It works all well and good, however by default it seems to start the live reload server on http://localhost:8082. Is there a way to specify what host to use for the live reload, like say there is a custom domain defined as https://hotreload.com:3000? Any help would be appreciated!

Solution :

Edit the webpack.config.js to specify devServer.host, devServer.port, and devServer.https. Using the example specs:

module.exports = {
//…
devServer: {
host: ‘hotreload.com’,
port: 3000,
https: true,
}
}

[Vue.js] How to use Toasted inside an export default {}

I’m trying to use the package Toasted but I’m having a hard time understading how to use it.

there is a package called TreatErrors.js and I call this package to handle all errors from my application based on HTTP code returned by API a restfull API.

TreatErrors.js

import toasted from ‘vue-toasted’;
export default {
treatDefaultError(err){
let statusCode = err.response.status;
let data = err.response.data;
for(let field in data.errors){
if (data.errors.hasOwnProperty(field)) {
data.errors[field].forEach(message => {
toasted.show(message);
})
}
}

if(statusCode === 401){
toastr.error(‘the token has expired. Please logout and login again to retrieve a new token’);
}

return null;
},
}

and I’m tryin to call Toasted from within this package but I’m getting vue_toasted__WEBPACK_IMPORTED_MODULE_2___default.a.show is not a function. Any idea how I can use this Toasted inside of my own defined package?

Solution :

The vue-toasted plugin must be registered with vue.js first:

import Toasted from ‘vue-toasted’;
Vue.use(Toasted); // <– register plugin

Then, the module could use it via Vue.toasted.show(…):

// TreatErrors.js
export default {
treatDefaultError(err) {
Vue.toasted.show(err.message);
}
}

And the vue.js components could also use it via this.$toasted.show(…):

// Foo.vue
export default {
methods: {
showError(err) {
this.$toasted.show(err.message);
}
}
}