Feed aggregator

I try to use the component buttonGroup from the library vue-strap as a toggle but I can't get it work. I succeed to set string value but not boolean value.

Here is the code

<button-group v-model="radioValue" type="primary"> <radio selected-value="true">Correct</radio> <radio selected-value="false">Incorrect</radio> </button-group>

The variable radioValue is updated correctly and set to "true" or "false" (string). But now I'd like to set a boolean instead (true or false).

I tried to make a codepen but I can't get it work neither. If it was working, I would tell you to open the console and execute vm.radioValue, click on Incorrect and execute vm.radioValue a second time. You will see that a string is set instead of a boolean.

I tried to bind the value (:select-value="true"). It kind of work but when the user clic on "Correct", the other button (Incorrect) is also active. Maybe it's a bug from vue-strap...

I want to read a file got from an <input> on the front end, in order to parse it (it will be a json file). Im working on a webpack application using javascript with vue.js.

I've tried readFile or rawFile objects but it did't worked...

What can i do please ?

Thx.

I want to change my page title according to the links I follow, just like how every page on stack overflow all have different page title with different links, some page titles are binded with the question title, how can such be done with vuejs, this will be good for search engine optimization, etc. I'm loving vuejs but I dont understand this part, is there something I'm missing?

I have a function in my vue applications that creates a chart.This is the chart function:

startChart: function (canvas, type) { // init chart.js var ctx = document.getElementById("myChart"); var myDoughnut = new Chart(ctx, { type: 'doughnut', data: { labels: this.getAnalyticList[this.getRowIndex].chartNames, datasets: [{ data: this.getAnalyticList[this.getRowIndex].chartData, backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)', 'red', 'yellow', 'blue', 'green', 'orange', 'teal', 'violet', 'pink', 'purple' ] }] }, options: { responsive: true, defaultFontColor: '#ffffff', } }) }

and i then started it in the vue mounted hook using this line

this.startChart(this.$refs.canvas, 'Doughnut');

What i want to do is take the row index of a table loaded above the chart and that would then be passed into the getAnalyticList value that loads the charts so i can grab different arrays from the same list. I was working on creating an update function i got off this js fiddle from this stack article. I've been trying to adapt the function he created into vue but am having no luck here is the function:

changeData: function () { var myChart = Chart.doughnut(this.$refs.canvas, { data: data, }); myChart.data.datasets.data = this.getAnalyticList[this.getRowIndex].chartData; myChart.data.labels = this.getAnalyticList[this.getRowIndex].chartNames; myChart.update(); }

Any suggestions would be appreciated.

So I want to have an action only if the user has the mouse on the div for at least 1 second. Inside template:

<div @mouseover="trigger"></div>

Inside script:

data() { return { hovered: false } } methods: { trigger() { setTimeout(function(){ this.hovered = true }, 1000) } }

My problem is that I don't understand the scope of Vue. Because this.hovered is inside another function, it does not find the actual hovered data variable. What's the solution to this?

In my main.js I have some code that checks for the existence of a localStorage item. If it has it, it will add an Authorization header via middleware to the ApolloClient setup.

However, if a localStorage item is later added, it's not present in the middleware of main.js. A full page refresh is therefore required in order to get it to pick it up / know of its existence.

How can I run main.js again (if that's even the solution) from a method in say, a component that signs the user in?

Here's my main.js:

import Vue from 'vue' import ApolloClient, { createNetworkInterface } from 'apollo-client' import VueApollo from 'vue-apollo' import App from './App' import router from './router' import store from './store' const networkInterface = createNetworkInterface({ uri: 'https://api.graph.cool/simple/v1/MY-ID-HERE' }) const requestToken = localStorage.getItem('TOKEN') networkInterface.use([{ applyMiddleware (req, next) { if (!req.options.headers) { req.options.headers = {} } req.options.headers['Authorization'] = requestToken ? `Bearer ${requestToken}` : null next() } }]) const apolloClient = new ApolloClient({ networkInterface }) const apolloProvider = new VueApollo({ defaultClient: apolloClient }) Vue.use(VueApollo) /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App />', components: { App }, apolloProvider, router, store })

Hopefully you can understand what I'm trying to do?

Thanks

I'm starting to use VueJS with Firebase (and VueFire), but I'm starting to struggle a bit about how to structure the data.

My case is pretty simple.

I have a list of suppliers and a list of products.

A product can only be linked to one supplier, and a supplier can have multiple products.

And I have different views :

• List of all products for all suppliers
• List of products for one supplier
• Detail of one product with the supplier.

For the 1st and 2nd views, I have no issue with the following structure

products - productKey1 - name : Product1 - productKey2 - name : Product2 supplier-products: - supplierKey1 - productKey1 - name : Product1 - supplierKey2 - productKey2 - name : Product2 supplier: - supplierKey1 - name : Supplier1 - supplierKey2 - name : Supplier2

I can easily show a list of all products from "/products" and for each supplier from "supplier-products/supplierKey"

But what about a view with the product detail + the supplier detail.

What is the best way to do that ?

• Adding the supplier information into each products ?
• Add a kind of foreign key into products ?
• Another way to do it ?

Thanks for your help.

I have a a root and a child component. I am trying to pass data using the props from parent to child.

<div id="root"> <my-component> v-bind:valObj='valObjItems'> </my-component> </div> Vue.component('money-manager-section', { props: ['accountTypes'], data() { return { accounts: Object.assign({},this.accountTypes) } }, template: ` <div v-for="x in accounts"></div> // I kept it short for this line. It returns 0 ` }

Through Vue debugger extension, I can see my-component has the accountTypes but id doesn't show.

The object structure is like this:

var obj = { 1 : { "a", "z", "k", "m" } 2 : { "a", "b", "c", "d" } }

And in my main app,

var app = new Vue({ el: '#root', data: { accountTypes : {}, }, // And these are what I use for push and delete: methods : { pushValue(key, value) { var obj = this.accountTypes if (obj.hasOwnProperty(key)) { var idx = $.inArray(value, obj[key]); if (idx == -1) { obj[key].push(value); } } else { obj[key] = [value]; } }, removeFromArray(key, val) { var idx = $.inArray(val, this.accountTypes[key]); if (idx != -1) { this.accountTypes[key].splice(idx, 1); } } }

I'm trying to set the value of an input corresponding to the selected radio button, but I just can't figure out how.

<input type="text" class="input" name="provider" v-model="selected_provider"> <b-radio-group v-model="provider_options"> <div class="field"> <template v-for="provider in providers"> <b-radio name="select_provider[]" id="provider_@{{ $index }}" model="selected_provider" value="provider" type="radio"> @{{ provider.provider_name }} </b-radio> </template> </div> </b-radio-group>

I've managed to get an array to display and that the input shows whatever is written in selected_provider, but I just don't know how to link those together.

var app = new Vue({ el: '#app', data: { selected_provider: '', providers: [ { provider_name: 'Twitch', provider_url: 'https://www.twitch.tv/' }, { provider_name: 'Smashcast', provider_url: 'https://www.smashcast.tv/' }, { provider_name: 'AzubuFrost', provider_url: 'https://www.smashcast.tv/' } ] }, });

furthermore I'd like to attach the value of

<input type="text" class="input" name="name" id="name">

to the end of provider_url in selected_provider

Is someone so kind to help me?

I want to run a method inside a v-for in my Vue component. Example:

<div v-for="(foo,index) in bar> <p>{{myMethod(foo,index)}}</p> </div>

When I do this the p-tag just stays empty. Here is my method:

myMethod:function(foo,index){ //do something with foo and index return SomethingWithFooAndIndex }

When I alert( SomethingWithFooAndIndex), the browser is showing exactly what I need. So do you guys have any idea why the p tag stays empty?

Thanks!

I am getting error about using vue-i18n dependance.

How should i get the const i18n from main.js to root.js (store)

I am using

• Vuejs 2.X
• Vue-i18n latest
• Vuex For Vuejs 2.X

In main.js (vue-cli)

Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'en', messages: { en: { message: en }, cn: { message: cn } } }) new Vue({ store, el: '#app', i18n, router, template: '<App/>', components: { App } })

In root.js (store)

export const mutations = { [types.SET_LANGUAGE] (state, data) { console.log(i18n.locale) // 'i18n' is not defined localStorage.setItem('language', data) }, }

I am converting a JavaScript project to TypeScript. However I am getting a type error when trying to make Vue use Vuex.

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex);

It looks like the problem is that vuex does not provide type definitions like vuejs does?

Because I also have to set

"allowSyntheticDefaultImports": true

in my tsconfig.json.

How can I solve this problem and make Vue.use accept Vuex as the correct type?

I'm using webpack and vue.js 2 and vue-google-maps. I have an issue where i need to pass to a google maps component via a prop a rendered vue-template.

e.g.

<gmap-info-window :options="infoOptions" :position="infoWindowPos" :opened="infoWinOpen" :content="infoContent" @closeclick="infoWinOpen=false"> </gmap-info-window>

i need to pass to the :content prop. something along the lines of this:

<p> Some Name <a :href="some.url" target="_blank" @click="myFunction('param1', $route.name, param2)">some link</a> <p>

basically i need infoContent to be the vue compiled version of the above. I can get the template e.g. by doing:

this.infoContent = myTemplate;

but that only gets me the raw unrendered version of the template if i add .render() to that i start getting errors about _vm._self is undefined"

I want to show a button if my array of object has some data, so basilcy in my store(vuex) i defined a array like this:

state: { document: [] },

i append data to this array from other components and i already checked that the data is appending right, no problem here.

So i want to show the button just if there is some data:

<div class="row margin-above"> <div class="panel panel-primary" v-for="section in this.$store.getters.getDocument"> <div class="panel-body quote" > <p>{{section.key}}</p> </div> </div> <div v-if="this.$store.getters.getDocument != '[]'"> <button class="btn btn-success btn-block">Create Document</button> </div> </div>

there is the button, i want to hide the whole div with the button if the condition matches, but it is not working the button is always there, any help?

For example, the dynamic render drop-down box has default values and can also toggle the value of the drop down box？

I have the following sample grid in which I push some new values to the bound list.

Press anywhere in the grid to push a new value to the grid.

As you can see in the fiddle, the updated cell will have a green color for 500 ms, and all the re-rendered elements will have yellow color.

The question is how we should configure Vue component so that it only re-render the changed element instead of them all?

If you look at the fiddle console output, you will see numbers like (13001, 26001, ...) and this equals to the number of all cells (1000 rows x 13 columns).

.yellow { background-color: yellow; } .pushed { background-color: lightgreen } <script src="https://unpkg.com/vue"> var globalCount = 0; </script> <head> <title>Vue Render Performance</title> </head> <div id="demo"> <demo-grid :data="gridData" :columns="gridColumns"> </demo-grid> </div> <script type="text/x-template" id="grid-template"> <table @click="pushData()"> <thead> <tr> <th v-for="key in columns"> {{key}} </th> </tr> </thead> <tbody> <tr v-for="(entry, i) in data"> <td v-for="(key, j) in columns" :id="'a'+i +'_'+j"> {{renderMe(entry[key], 'a'+i +'_'+j)}} </td> </tr> </tbody> </table> </script> <script> const data = newData(1000); var renderedCount = 0; var startTime = performance.now(); Vue.component('demo-grid', { props: { data: Array, columns: Array, renderCount: Object, }, template: '#grid-template', methods: { renderMe(el, id) { const elm = document.getElementById(id); if (elm) { elm.className += " yellow"; } if (!renderedCount) { renderedCount = 0 } else { renderedCount++; } return el; }, pushData() { debugger var push = function() { let cols = ["Col1", "Col2", "Col3", "Col4", "Col5", "Col6", "Col7", "Col8", "Col9", "Col10", "Col11", "Col12", "Col13"]; var t0 = performance.now(); for (let i = 0; i < 1; i++) { let newVal = Math.random() * 10000, row = Math.round(Math.random() * 1000), cellIndex = Math.floor(Math.random() * cols.length); cell = cols[cellIndex]; if (data[row]) data[row][cell] = newVal; var el = document.querySelector('tbody tr:nth-child(' + row + ') td:nth-child(' + cellIndex + ')'); if (el) { el.className = 'pushed'; el.scrollIntoView(); var t = function() { if (el) { el.className = ''; } clearTimeout(t); }; setTimeout(t, 500); } console.log('pushed to cell [' + row + ',' + cellIndex + '] :' + newVal); console.log('Rendered Count: ' + renderedCount) renderedCount++; }; var t1 = performance.now(); console.log(t1 - t0) }; push(); } } }); // bootstrap the demo var demo = new Vue({ el: '#demo', data: { searchQuery: '', gridColumns: ["Col1", "Col2", "Col3", "Col4", "Col5", "Col6", "Col7", "Col8", "Col9", "Col10", "Col11", "Col12", "Col13"], gridData: data } }) Vue.config.devtools = true; function newData(count) { const data = []; for (let i = 0; i < count; i++) { data.push({ Col1: "Record", Col2: 818959475, Col3: 467587749, Col4: 438, Col5: 439, Col6: 440, Col7: 2.1, Col8: 436.2, Col9: 2.4, Col10: 5770, Col11: 5771, Col12: 5772, Col13: 5773 }); } return data; } </script>

I'm working in a vue file inside of a Symfony project and I want to find the absolute path from a route. Usually i do something like that :

this.$http({ url: 'products/edit/'+product.id, method: 'PUT', params : params [...]

and it works great. But now i don't need to use this.$http because i'm trying to do that :

<div> {{ getUrl(product) }} </div>

and I have my fonction :

getUrl(product) : { let url = '/products/edit'+product.id return url }

but obviously it only display : /products/edit/xxx instead of mysite.com/products/edit/xxx in production or localhost/products/edit/xxx in local. In my routing file I have :

update_product: path: /products/edit/{product} defaults: { _controller: RBProductsBundle:Product:edit }

I am trying to integrate Vue JS in one of my application with latest version 2.4.2.Backend implementation uses struts and we set Content-Security-Policy script-src 'self' 'unsafe-inline' in response headers.

At first I was trying to use standalone Vue JS instead of using webpack or any other tool. I see the following CSP error when I execute my page using Vue JS :

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

warn — vue.min.js:485 compileToFunctions — vue.min.js:9842 $mount — vue.min.js:10040 Global Code — example.do:51

To avoid this issue, I have started using webpack to pre-compile the templates so that the issue will be resolved and I still see the below error in webpack JS :

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".

Is there any solution to use webpack / Vue JS with CSP's enabled ? What is the suitable solution to handle CSP issues.

Sample Example : Vue is not detected when JSP is loaded through struts

Thanks for your help in advance.

I have the following components:

• Users

• Addresses

Inside the Users component I have the following:

<script> export default { data() { return { address: null } } } </script>

Inside the view, I have the following (calling the child component)

<partials-addresses source="/users" title="Users Address" @addressChanged="address = $event" placement="address" />

This is then sent to an endpoint (using axios):

submitForm: function() { var vm = this; console.log(vm.address); // is fine, returns the object axios.post(`/users`, { address: vm.address }); }

The issue is that when I'm outputting the data on the endpoint side, I'm just getting an empty array. I'm using another child component and this sends data through fine, it's just the address one.

Could it be because of the way the data is formatted?

I'm trying to implement dependent selects using Vue.js (last version), but my app logic breaks when I have a few v-for and v-if. I can't understand where is my mistake. Please, help me solve the problem.

Click Toggle !pickup and try to change District select and you'll see issue. You can also delete div with v-if="!cartPage.pickup" or change v-if to v-show, and you can see, everything is working..

Here is my code

jsFiddle link

var vm = new Vue({ el: '#app', data: { userInfo: { loggedIn: false, }, cartPage: { pickup: false, restaurants: {}, currentCity: '', currentDistrict: '', currentRestaurant: '', }, }, methods: { setDefaultDistrict: function() { this.cartPage.currentDistrict = this.cartPage.currentCity.districts[0]; this.setDefaultRestaurant(); }, setDefaultRestaurant: function() { this.cartPage.currentRestaurant = this.cartPage.currentDistrict.restaurants[0]; }, }, }) vm.cartPage.restaurants = [{ city: "City 1", districts: [{ districtName: "City 1 district 1", restaurants: [{ placeName: "City 1 district 1 Restaurant 1", name: 'City 1 district 1 Restaurant 1', address: 'City 1 district 1 Restaurant 1', hours: '10:00–22:00', }, { placeName: "City 1 district 1 Restaurant 2", name: 'City 1 district 1 Restaurant 2', address: 'City 1 district 1 Restaurant 2', hours: '10:00–20:00', }] }, { districtName: "City 1 district 2", restaurants: [{ placeName: "City 1 district 2 Restaurant 1", name: 'City 1 district 2 Restaurant 1', address: 'City 1 district 2 Restaurant 1', hours: '12:00–22:00', }, { placeName: "City 1 district 2 Restaurant 2", name: 'City 1 district 2 Restaurant 2', address: 'City 1 district 2 Restaurant 2', hours: '12:00–22:00', }] } ], }, { city: "City 2", districts: [{ districtName: "City 2 district 1", restaurants: [{ placeName: "City 2 district 1 Restaurant 1", name: 'City 2 district 1 Restaurant 1', address: 'City 2 district 1 Restaurant 1', hours: '10:00–22:00', }, { placeName: "City 2 district 1 Restaurant 2", name: 'City 2 district 1 Restaurant 2', address: 'City 2 district 1 Restaurant 2', hours: '10:00–20:00', }] }, { districtName: "City 2 district 2", restaurants: [{ placeName: "City 2 district 2 Restaurant 1", name: 'City 2 district 2 Restaurant 1', address: 'City 2 district 2 Restaurant 1', hours: '12:00–22:00', }, { placeName: "City 2 district 2 Restaurant 2", name: 'City 2 district 2 Restaurant 2', address: 'City 2 district 2 Restaurant 2', hours: '12:00–22:00', }] } ], }, { city: "City 3", districts: [{ districtName: "City 3 district 1", restaurants: [{ placeName: "City 3 district 1 Restaurant 1", name: 'City 3 district 1 Restaurant 1', address: 'City 3 district 1 Restaurant 1', hours: '10:00–22:00', }, ] }, ], }, ] vm.cartPage.currentCity = vm.cartPage.restaurants[0]; vm.cartPage.currentDistrict = vm.cartPage.currentCity.districts[0]; vm.cartPage.currentRestaurant = vm.cartPage.currentDistrict.restaurants[0]; .custom-radio { display: block; margin: 10px; border: 1px solid #000; cursor: pointer; } <script src="https://unpkg.com/vue@2.4.2"></script> <div id="app"> <div class="cart__delivery-and-pay"> <h2 class="cart__delivery-and-pay--title">Heading</h2> <div class="delivery__block"> <div class="delivery__block-header cf"> <div class="delivery__variants"><span @click="cartPage.pickup = false" v-bind:class="{ 'active': !cartPage.pickup }" class="courier custom-radio">Toggle pickup</span><span @click="cartPage.pickup = true" v-bind:class="{ 'active': cartPage.pickup }" class="pickup custom-radio">Toggle !pickup</span></div> </div> <div class="delivery__cols"> <!-- if delete this everything is working! --> <div v-if="!cartPage.pickup" class="delivery__col delivery__address"> <div class="delivery__col-heading">Address: <div class="custom-select__wrapper item__option"> <select class="custom-select"> <optgroup label="Choose city"> <option value="1" v-for="singleCity in cartPage.restaurants">{{ singleCity.city }}</option> </optgroup> </select> </div> </div> </div> <!-- if delete this everything is working! --> <div v-if="cartPage.pickup" class="delivery__col delivery__address"> <div class="delivery__col-heading">Address: <div class="custom-select__wrapper item__option delivery__address-city"> <select v-model="cartPage.currentCity" @change="setDefaultDistrict" class="custom-select"> <option v-for="singleCity in cartPage.restaurants" v-bind:value="singleCity" v-bind:selected="cartPage.currentCity.city == singleCity.city ? true : false">{{ singleCity.city }}</option> </select> </div> </div> <div class="delivery__row delivery__row-flex-start">District <div class="custom-select__wrapper item__option"> <select v-model="cartPage.currentDistrict" @change="setDefaultRestaurant" class="custom-select"> <option v-for="singleDistrict in cartPage.currentCity.districts" v-bind:value="singleDistrict">{{ singleDistrict.districtName }}</option> </select> </div> </div> <div class="delivery__row delivery__row-flex-start">Restaurant: <div class="custom-select__wrapper item__option"> <select v-model="cartPage.currentRestaurant" class="custom-select"> <option v-for="singleRestaurant in cartPage.currentDistrict.restaurants" v-bind:value="singleRestaurant">{{ singleRestaurant.placeName }}</option> </select> </div> </div> <div class="delivery__row delivery__row-flex-start delivery__row--last-row"><span v-if="cartPage.currentRestaurant" class="delivery__row-note">{{ cartPage.currentRestaurant.address }}, {{ cartPage.currentRestaurant.hours }} ч.</span></div> </div> </div> </div> </div> </div>