link822 link823 link824 link825 link826 link827 link828 link829 link830 link831 link832 link833 link834 link835 link836 link837 link838 link839 link840 link841 link842 link843 link844 link845 link846 link847 link848 link849 link850 link851 link852 link853 link854 link855 link856 link857 link858 link859 link860 link861 link862 link863 link864 link865 link866 link867 link868 link869 link870 link871 link872 link873 link874 link875 link876 link877 link878 link879 link880 link881 link882 link883 link884 link885 link886 link887 link888 link889 link890 link891 link892 link893 link894 link895 link896 link897 link898 link899 link900 link901 link902 link903 link904 link905 link906 link907 link908 link909 link910 link911 link912 link913 link914 link915 link916 link917 link918 link919 link920 link921 link922 link923 link924 link925 link926 link927 link928 link929 link930 link931 link932 link933 link934 link935 link936 link937 link938 link939 link940 link941 link942 link943 link944 link945 link946 link947 link948 link949 link950 link951 link952 link953 link954 link955 link956 link957 link958

[Vue.js] { error 'unsupported_grant_type', JS error_description 'grant type not supported' }

We are new to native script vuejs. we are trying to make OAuth with Salesforce. But the thing is we are getting error response while making HTTP post request using HTTP of native script. Expected to get token.

The response error is as follows:

{
error: ‘unsupported_grant_type’,
JS: error_description: ‘grant type not supported’
}

The grant_type which we have used is authorization_code.

Thanks!

below is the code we have tried so far

httpModule.request({
url: “https://login.salesforce.com/services/oauth2/token",
method: “POST”,
headers: {
“Content-Type”: “application/x-www-form-urlencoded”
},
content: JSON.stringify({
grant_type: ‘authorization_code’,
client_id: ‘CLIENT_ID’,
client_secret: ‘CLIENT_SECRET’,
redirect_uri: ‘REDIRECT_URL’,
code: ‘CODE’
})
}).then(response => {
console.log(response)
// if(response.status === 200)
// {
console.log(‘Response recieved’)
const result = response.content.toJSON();
console.log(result, “71”)
// }
}, (e) => {
console.log(‘Something went wrong’ + e)
});

Solution :

I haven’t used salesforce much but running some tests with POSTMAN Rest Client shows the salesforce api expects FormData instead of JSON body. FormData is not supported out of the box in NativeScript but there is a plugin you could try nativescript-http-formdata

tns plugin add nativescript-http-formdata

[Vue.js] my component's contents are not being displayed when I use vue-router

when new to vue. Sorry if this is a silly question. when using vue-router to route to a component. My url is changing when I click on the router link but the contents of the component are not being displayed. when not getting any error in the developer tools. It would be a huge help if you can help.

I tried all the answers regarding this issue here and still couldn’t get it to work.

src/App.vue

<template>
<div id=”app”>
<router-link to=”/toread”>Go toread</router-link>
<router-view></router-view>
</div>
</template>
<script>
import toread from ‘./components/toread.vue’;
export default {
name: ‘app’,
components:{
toread
},
}
</script>

src/components/toread.vue

<template>
<div>
<h1>toread</h1>
</div>
</template>
<script>
export default {

}
</script>
<style scoped>

</style>

src/main.js

import vue.js from ‘vue’
import App from ‘./App.vue’
import VueRouter from ‘vue-router’
import Routes from ‘./routes’
import toread from ‘./components/toread.vue’

Vue.use(VueRouter)
const router = new VueRouter({
Routes
});
new Vue({
el: ‘#app’,
render: h => h(App),
router
})

src/routes.js

import toread from ‘./components/toread.vue’
export default[
{path:’/toread’, component:toread},
]

I expect to click on the router link and display the h1 tag from toread component.

Solution :

Try changing Routes to routes: Routes

const router = new VueRouter({
routes: Routes
});

[Vue.js] How to run bootstrap's carousel interval function in component on vue.js?

to run a carousel interval function for Bootstrap 4’s carousel in a component on Vue.js. When I paste to script tag in index.html, it works. But I can’t run in a component. How can I run it?

the code I mentioned here:

$(“.carousel”).carousel({
interval: 200
});

<template>
<div
id=”slider-1”
class=”carousel slide pull-full-screen”
data-ride=”carousel”
\>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<img src=”../images/slides/cycling.jpg” class=”d-block w-100” alt=”…”>
</div>
<div class=”carousel-item”>
<img src=”../images/slides/diving.jpg” class=”d-block w-100” alt=”…”>
</div>
<div class=”carousel-item”>
<img src=”../images/slides/parachuting.jpg” class=”d-block w-100” alt=”…”>
</div>
</div>
</div>
</template>

Solution :

Try to put this statement inside mounted hook as follows:

mounted(){
$(“.carousel”).carousel({ interval: 200 });
}

check this codepen sample

[Vue.js] How can live position info of draggable element in Vue?

there is a draggle element in vue.js component, and I declare the data in data function

data() {
return {
position: {“top”:”116px”,”left”:”238px”}
}

}

I bind the position to the element

<div :style=”position”></div>

But I find when I drag the element, the bind data positionis not updated, the question is how can I get the live position info of the element?
Anyone could get me some clue?

Solution :

You’re trying to assign an object to the position CSS property. This won’t work; position must be a string with a value like relative, absolute, fixed, etc just like in regular CSS.

Try this instead:

data() {
return {
style: {
position: ‘absolute’,
left: ‘238px’,
top: ‘116px’,
}
}
}

<div :style=”style”></div>

When the element is dragged, just update this.style.left and this.style.top accordingly.

[Vue.js] Error in render TypeError Cannot read property 'products' of undefined

I got this error in console tab.

[vue.js warn]: Error in render: “TypeError: Cannot read property ‘products’ of undefined”

My code works normally but I don’t know why that error shows up. I think it because the DOM has rendered first then my data was populated after that. Is that true? If yes, how can I fix it?

Here is my component:

<template>
<main role=”main”>

<!– <breadcrumbs></breadcrumbs>–>

<slider></slider>
<bestseller :products=”serverData.bestsellerProducts.products”></bestseller>
<categorized-products></categorized-products>
<latest :products=”serverData.latestProducts.products”></latest>

</main>
</template>

<script>
import Slider from ‘./Slider’;
import Bestseller from ‘./Product/Bestseller’;
import Latest from ‘./Product/Latest’;
import CategorizedProducts from ‘./ProductCategory/CategorizedProducts’;
import {mapGetters} from ‘vuex’;

export default {
computed: {
…mapGetters({
serverData: ‘getServerData’
})
},
components: {
Slider,
Bestseller,
Latest,
CategorizedProducts
}
}
</script>

<style scoped>

</style>

Solution :

This often happens when the component renders before serverData is available. You should init this variable first in the state. Something like:

state: {
serverData: {
bestsellerProducts: {products: []},
latestProducts: {products: []},
}
}

I’d recommend separating bestSellerProducts and latestProducts from serverData.

Also make sure you handle props properly inside components. See vue.js Document on Props Validation.

Solution 2:

It looks like either bestsellerProducts or latestProducts doesn’t have a products attribute. If you could post the value for these two items I’d be able to give you a better answer.

Are you pushing to the array after the render?

Solution 3:

This method is kind of ghetto but:

You could make an error handler then if the error contains that text return the function otherwise console.error() it.

[Vue.js] Why is the checkbox filtering not working in VueJS?

Been trying for 8 hours now to get this to work and still no luck. Ultimately, what when trying to do is print a loop which shows all items by default. Then when a user selects a checkbox it will filter out those items where they are set to false.

there is the following group of checkboxes and a loop:

<div class=”container” id=”clubs”>
<div class=”filter”>
<label><input type=”checkbox” v-model=”selectedCategory” value=”All” /> All</label>
<label><input type=”checkbox” v-model=”selectedCategory” value=”ClubParking” /> Parking</label>
<label><input type=”checkbox” v-model=”selectedCategory” value=”ClubToilets” /> Toilets</label>
<label><input type=”checkbox” v-model=”selectedCategory” value=”ClubFloodlights” /> Floodlights</label>
</div>

<ul class=”clubs-list”>
<li v-for=”club in filteredClubs”>{ club.clubName }</li>
</ul>
</div>

Then in my application there is the following code

var vm = new Vue({
el: “#clubs”,
data: {
clubs: [
{ clubName: “Club One”, clubParking: true, clubToilets: false, clubFloodlights: true },
{ clubName: “Club Two”, clubParking: true, clubToilets: false, clubFloodlights: false },
{ clubName: “Club Three”, clubParking: false, clubToilets: true, clubFloodlights: true },
],
selectedCategory: “All”
},
computed: {
filteredClubs: function() {
var vm = this;
var category = vm.selectedCategory;

if(category === “All”) {
return vm.clubs;
} else {

return vm.clubs.filter(function(club) {
return selectedFieldNames.every(fname=>club[fname])
const selectedFieldNames = selectedCategory.map(category=>{
switch(category){
case ‘Toilets’:
return ‘clubToilets’;
case ‘Parking’:
return ‘clubParking’;
case ‘Floodlights’:
return ‘clubFloodlights’;
}
})

});

}
}
}
});

there is even made a Codepen when better with a working modal then I can backtrack to see why there is been going wrong. Any help welcome as I have’nt left the house all day trying to get it to work.

Solution :

Edited the codepen as discussed on comments above.
1. moved from “string” selectedCategory to “array”
2. changed filtering to work for array

var vm = new Vue({
el: “#clubs”,
data: {
clubs: [
{ clubName: “Club One”, clubParking: true, clubToilets: false, clubFloodlights: true },
{ clubName: “Club Two”, clubParking: true, clubToilets: false, clubFloodlights: false },
{ clubName: “Club Three”, clubParking: false, clubToilets: true, clubFloodlights: true },
],
selectedCategories: [“All”]
},
computed: {
filteredClubs: function() {
if (this.selectedCategories.includes(‘All’)) {
return this.clubs;
} else {
return this.clubs.filter(club => {
return this.selectedCategories.some(category => club[category])
})
}
}
}
});
.container {
padding: 20px;
width: 90%;
max-width: 400px;
margin: 0 auto;
}

label {
display: block;
line-height: 1.5em;
}

ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}

li {
padding: 8px 16px;
border-bottom: 1px solid #eee;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class=”container” id=”clubs”>
<div class=”filter”>
<label><input type=”checkbox” v-model=”selectedCategories” value=”All” /> All</label>
<label><input type=”checkbox” v-model=”selectedCategories” value=”clubParking” /> Parking</label>
<label><input type=”checkbox” v-model=”selectedCategories” value=”clubToilets” /> Toilets</label>
<label><input type=”checkbox” v-model=”selectedCategories” value=”clubFloodlights” /> Floodlights</label>
</div>

<ul class=”clubs-list”>
<li v-for=”club in filteredClubs”>{ club.clubName }</li>
</ul>
</div>

[Vue.js] Vuetify V-flex full only half of card

My v-flex it is not respecting my orders and only half of element it was rendered. see the print:

Print from my view

Here is my script:

<v-card-title primary-title>
<div>
<p class=”subheading grey–text”>My title</p>
<h3 class=”headline my-4”>my sub title</h3>
<div>
<v-container fluid>
<v-card flat v-for=”ticket in tickets” :key=”ticket.id”>
<v-layout row weap :class=”`pa-2 ticket ${ticket.status.id}`“>
<v-flex xs3>
<div class=”caption grey–text”>#ID</div>
<div>{ticket.id}</div>
</v-flex>
<v-flex xs3>
<div class=”caption grey–text”>Assunto</div>
<div>{ticket.subject}</div>
</v-flex>
<v-flex xs3>
<div class=”caption grey–text”>Criado em</div>
<div>{ticket.created_on}</div>
</v-flex>
<v-flex xs3>
<div class=”right”>
<v-chip
small
:class=”`${ticket.status.id} white–text caption my-2`“
\>{ticket.status.name}</v-chip>
</div>
</v-flex>
</v-layout>
</v-card>
</v-container>
</div>
</div>
</v-card-title>

Someone has any ideas?

Tks.

Solution :

You can add a full width flex box above the v-card on line 7:

<v-flex xs12>
<v-card flat v-for=”ticket in tickets” :key=”ticket.id”>

[Vue.js] vue codemirror cannot load import on startup

when trying to load the code-mirror in a component.

import ‘codemirror-cdn’;
import {codemirror} from ‘https://cdn.jsdelivr.net/npm/vue-codemirror@4.0.6/dist/vue-codemirror.min.js';

loading it via above statements but getting error

vue-router.js:1927 SyntaxError: The requested module ‘https://cdn.jsdelivr.net/npm/vue-codemirror@4.0.6/dist/vue-codemirror.min.js' does not provide an export named ‘codemirror’

Solution :

If using the CDN, this should be included in the template tag:

<script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/vue-codemirror@4.0.6/dist/vue-codemirror.min.js"></script>

[Vue.js] VueJS Updating component collection data from its child

Given Todo list with filtering:

list.vue:

<script>
import TodoItem from ‘./todo_item.vue’;
export default {
components: { TodoItem },
props: [‘selectePriority’],
data: {
items: [
{ name: ‘Do shopping’, priority: ‘high’ },
{ name: ‘Play games’, priority: ‘low’ }
]
},
computed: {
selectedItems: function() {
if(this.selectedPriority == ‘all’) {
return this.items;
} else {
var selectedPriority = this.selectedPriority;
return this.items.filter(function(item) {
return item.priority == selectedPriority
});
}
}
},
}
</script>

<template>
<div>
<select v-model=”selectedPriority”>
<option value=”all”>All</option>
<option value=”low”>Low</option>
<option value=”high”>High</option>
</select>
<todo-item
v-for=”item in selectedItems”
:name=”item.name”
:priority=”item.priority”
/>
</div>
</template>

todo_item.vue:

<script>
export default {
props: [‘name’, ‘priority’]
}
</script>
<template>
<div>
<p>{ name }</p>
<select v-model=”priority”>
<option value=”low”>Low</option>
<option value=”high”>High</option>
</select>
</div>
</template>

html:

<list />

Now, when for example filter is set to all, I change Play games to priority high and change filter to high, I will see only Do shopping, as priority was not updated in items collection and it was re-rendered.

What is proper way to update collection data from child components in Vue.js?

Solution :

computed properties have the ability to create and return a filtered list.

this example uses lodash

data: {
items: [
{name: ‘thing 1’, value: 1000},
{name: ‘thing 2’, value: 50},
{name: ‘thing 3’, value: 250},
{name: ‘thing 4’, value: 342},
],
},
computed: {
orderedItems() {
let items = []
return _.orderBy(this.items, ‘value’, ‘desc’);
},
}

to update pass the index from orderedItems array into the “this.items” array.

Solution 2:

I found some solution that works - instead of passing all params of todo-item into component, pass whole object:

<todo-item
v-for=”item in selectedItems”
:item=”item”
/>

Then object in parent collection is updated automatically.

Is that a good way of doing that in Vue?

[Vue.js] Webpack build error when building typescript code with Vue

when transforming my project(based on vue.js) from Javascript to Typescript and when I try to build my project with modified webpack configuration and code, I just failed on importing vue.js package.

my index.js:

import vue.js from “vue”;
import store from ‘./vuex/store’;
import app from ‘./app.vue’;

let v = new Vue({
el: ‘#eme’,
store,
components: {app}
}
);

My webpack config:

‘use strict’
const path = require(‘path’)
const webpack = require(‘webpack’)
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)
const appPkg = require(‘../app/package’)

const postcss = [
require(‘postcss-nested’),
require(‘postcss-import’)(),
require(‘postcss-simple-vars’),
require(‘postcss-mixins’),
require(‘autoprefixer’)({
browsers: [‘last 2 Chrome versions’]
})
]

module.exports = {
entry: {
app: [‘./src/index.ts’],
vendor: [‘vue’, ‘vuex’]
},
output: {
path: process.cwd() + ‘/app/dist’,
filename: ‘[name].js’
},
resolve: {
extensions: [‘’, ‘.js’, ‘.vue’, ‘.css’, ‘.json’, ‘.ts’],
alias: {
‘vue$’: ‘vue/dist/vue.common.js’,
src: path.join(__dirname, ‘../src’),
utils: path.join(__dirname, ‘../src/utils’),
components: path.join(__dirname, ‘../src/components’),
css: path.join(__dirname, ‘../src/css’),
directives: path.join(__dirname, ‘../src/directives’),
store: path.join(__dirname, ‘../src/vuex/store’)
}
},
module: {
loaders: [
{
test: /\.js$/,
loaders: [‘babel’],
exclude: [/node_modules/]
},
{
test: /\.vue$/,
loaders: [‘vue’]
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
‘style-loader’,
‘css-loader!postcss-loader’
)
},
{
test: /\.json$/,
loaders: [‘json’]
},
{
test: /\.svg$/,
loaders: [‘svg-inline’]
},
{
test: /\.tsx?$/,
loader: ‘ts-loader’,
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
]
},
babel: {
presets: [‘es2015’, ‘stage-1’],
plugins: [‘transform-runtime’]
},
vue: {
autoprefixer: false,
postcss,
loaders: {
css: ExtractTextPlugin.extract(
‘vue-style-loader’,
‘css-loader?sourceMap’
)
}
},
postcss,
target: ‘electron-renderer’,
plugins: [
new webpack.ExternalsPlugin(‘commonjs2’, [
‘./vendor/markdown-it-katex’,
‘../package.json’
].concat(Object.keys(appPkg.dependencies))),
new ExtractTextPlugin(‘[name].css’),
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
filename: ‘vendor.js’
})
]
}

const webpack = require(‘webpack’)
const config = require(‘./webpack.config’)

config.plugins = config.plugins.concat([
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compressor: {
warnings: false
},
//comments: false
}),
new webpack.DefinePlugin({
‘__DEV__‘: false,
‘process.env.NODE_ENV’: JSON.stringify(‘production’)
})
])

but when I try to build this project, there is the following error:

“app.js from UglifyJs\nSyntaxError: Unexpected token: name (Vue) [./src/index.ts:1,7]“

I don’t know how to solve it. More information of my environment:

ts-loader: 3.5.1
vue: 2.6.10
webpack: 1.15.0

Solution :

there is moved to webpack 2 and it seems that it is caused by bad ts-loader support in webpack 1. when fine now. :D