Software

I'm still new to Vue, but I feel like I'm almost getting the hang of it.. I managed to create an app that could translate to different languages where the content was loaded from LANG.json files.. the problem was that whenever I changed to a new view then it would turn back to the original translation..

So I tried to integrate Vuex to my application, but I can't seem to get it to work..

I believe this is all the relevant code:

src/i18n/index.js

import Vue from 'vue' import VueI18n from 'vue-i18n' import store from './../store' Vue.use(VueI18n) export default new VueI18n({ locale: store.state.Language, messages: { 'en': require('./en.json'), 'cn': require('./cn.json') } })

src/store/index.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const actions = { changeLanguage: ({ commit }, data) => commit('changeLanguage', data) } const mutations = { changeLanguage (state, data) { this.state.Language = data.lang } } const getters = { getLanguage: state => state.Language } const state = { Language: 'en' } export default new Vuex.Store({ state, getters, actions, mutations })

src/main.js

[...] import store from './store' import i18n from './i18n' [...] new Vue({ el: '#app', router, store, i18n, render: h => h(App) })

src/components/randomfile.js

<template> [...] <button v-on:click="en">English</button> <button v-on:click="cn">Chinese</button> </template> <script> export default { name: 'navFooter', data () { return { } }, methods: { en: function () { console.log('change lang') this.$store.dispatch('changeLanguage', 'en') // this.$i18n.locale = 'en' }, cn: function () { this.$store.dispatch('changeLanguage', 'cn') // this.$i18n.locale = 'cn' } } } </script>

I'm guessing the problem is either related to this line: locale: store.state.Language, or because I'm doing something wrong with the dispatch, because in one of my views I write {{$store.state.Language}}, which renders to en on page load, but disappears after I click the buttons that call the methods for dispatching.

I call the translations with {{ $t('views.home.title') }} but I'm pretty sure that's still the way they should be called after integrating vuex (store), and the translations do appear as they should, they just don't update after clicking the buttons that dispatch changeLanguage.

Any help would be much appreciated

I'm having trouble populating an array in data(). I'm simply pulling from a users JSON object(10 users), which is the same structure as randomapi

<template> <div class='row'> <ul> <li v-for="u in users"> Name : {{u.name}} <br> Email: {{u.email}} </li> </ul> </div> </template>

When the data is received, i loop through and populate a resultsArray, when it finishes, the users[] is equal to the resultsArray

<script> export default { data() { return { users: [] } }, methods: { getUsers() { this.$http.get('./playground/users.json') .then(response => { return response.json() }) .then(data => { const resultArray = [] for(let key in data){ resultArray.push(data[key]) } this.users = resultArray console.log(this.users) }) } }, created(){ this.getUsers() } } </script>

It's printing the following: Name : Email:

I am building a spa in vuejs and I want to change the color of my text on the basis of data I recieved,if i get pending status it should be grey and if submitted then green and if rejected then red and so on.

I use Vuejs and I use workbox-webpack-plugin in order to make my site offline, I want to cache a folder which contains all my files (3 files) like picture below, but when I build my project(using Laravel-mix). The main.js (which contains everything of Vue) cannot be cached in service-woker.js. I tried some ways to fix that but those didn't work. Does anybody face this issue, do you have any solution, many thanks!

->>picture-description

In Quasar version 0.13 the way to do it was:

<router-link v-bind:to="'/myurladdress'" tag='button' class='primary'>Link-name</router-link>

In the docs of of Quasar version 0.14.2 I merely find that your write a function on the button click event..?!

https://vuejs.org/v2/examples/grid-component.html

Does anyone has a paginantion feature for the grid component example in VueJS website?

It's convenient to group data into nested object properties. By doing this, we don't have to collect properties from the data field into an entity for later use. As in the following example,

var demo = new Vue({ el: '#demo', data: { level1: { level2: { level3_1: 'Hello', level3_2: 'world' } } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="demo"> <div class="person"> <h3>{{ level1.level2.level3_1 }}</h3> <p>{{ level1.level2.level3_2 }}</p> </div> </div>

However, it's really overkill having to type the "level1.level2" prefix in order to get to the level3_x field. It'll be very cumbersome if there're loads of level3 fields.

I wonder if there is any way that I can save the work for typing level1.level2 over and over again. Does the template have any syntax so that some section is under the scope of "level1.level2"? Does Vue provide any support so that in this case the prefix "level1.level2" is assumed?

I have developed an App based on vue.js using monaca, onsenUI and cordova. It works on my computer but when I send the project to my friend's computer, any change he made doesn't show after running monaca preview. Every dependencies and requirements are installed properly. Please help me out with the issue.

I have developed an app based on monaca, onsenUI and cordova. It works on my computer but when I send the project to my friend's computer, any change he made doesn't show after running monaca preview. Every dependencies and requirements are installed properly. Please help me out with the issue.

I am using nuxt.js.

Loads data from asyncData () of page component to axios.

async asyncData (context) { const name = context.route.params.name const response = await axios.get ('/ users /' + name) return { user: response.data.info } }

Navigate to when navigating to this page and the above code will work fine.

However, if you refresh (F5) on this page component,

const name = context.route.params.name

Gets the data in name.

const response = await axios.get ('/ users /' + name)

No parameter is passed in name.

That is, parameters are not passed to axios, and the server side does not receive param values.

To solve the above problem, the data was loaded from mounted () to axios.

Why does asyncData cause problems?

As we know, if we put <script> tag in the "el" vuejs, there will showing an error.. It's make me can't put any ads in vue el

For example:

new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"> {{ message }} <script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script> </div>

• Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

so is it impossible to put Ads in Vue el?

I am a backend developer and the frontend will be using Vue.js (not exist yet).

I am curious if standard restful API design already work nicely, or do I need special consideration when I am designing the API?

New to Vue.js. From the docs, one simple example is to use components to render each item in a list, like this:

<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> Vue.component('todo-item', { // The todo-item component now accepts a // "prop", which is like a custom attribute. // This prop is called todo. props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } })

(Source: https://vuejs.org/v2/guide/index.html#Composing-with-Components)

My question is: what is the correct way of changing, for example, a todo text?

My initial idea was to use <input v-model="todo.text"> in the component template. And it works. I find this nice because it updates the array of to-dos in the root component data attribute, which means I don't have to write an event to make the changed data bubble up.

But there's a problem. Reading on the docs in components, I saw this:

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to reason about. In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

If I understood this correctly, I should NOT try to change the todo text the way I did, because even tough it works, I'm changing a prop inside a child component (since each todo is passed to a child component via a prop).

But the documentation clearly says that Vue would warn me against this practice in the console, but I see no warnings.

Also, if this is not a best practice, how should I make a change in the to-do name correctly?

I am using vue-switch that toggles on and off and I need to know what state it's in. According to the documentation at https://www.npmjs.com/package/vue-switch I am just supposed to use :value.sync="toggle" in the switch component with a data property called 'toggle', which I've done. I'm getting the following error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" vue switch found in ---> <Switcher> at E:\Dev\BackgroundCheck.Members\front-end\node_modules\vue-switch\switch.vue

My HTML:

<switcher size="lg" color="green" :value.sync="toggle"></switcher>

My JS:

<script> import mySwitch from 'vue-switch'; export default { name: 'BackgroundReports', components: { 'switcher': mySwitch }, computed: { report() { return this.$store.getters.currentReport }, isBeingMonitored() { return this.$store.getters.isBeingMonitored } }, mounted() { this.toggle = this.isBeingMonitored; } } </script>

The switch.vue code:

<template> <div :class="className" @click="onClick"> <span class="open">{{ openName }}</span> <span class="close">{{ closeName }}</span> </div> </template> <script> 'use strict'; export default { props: { value: { default: true, twoWay: true }, size: { type: String, default: 'md中' }, // blue red green orange color: { type: String, default: 'red' }, openValue: { default: true }, closeValue: { default: false }, openName: { type: String, default: 'ON' }, closeName: { type: String, default: 'OFF' }, disabled: { type: Boolean, default: false } }, computed: { className() { let { value, openValue, closeValue, size, color, disabled } = this; return { 'vue-switch': true, 'z-on': value === openValue, 'z-disabled': disabled, ['s-' + size]: true, ['c-' + color]: true }; } }, methods: { onClick() { let { disabled, value, openValue, closeValue } = this; if (!disabled) { if (openValue === value) { this.value = closeValue; } else { this.value = openValue; } } } } } </script>

So I am in a situation where I want to create a const value inside mounded(). And want to use this const value inside the methods of a vie component.

export default { name : 'app', data(){ }, mounted(){ // Constant refThis is defined here which gets the reference to this vue component const refThis = this; }, methods:{ useThisRef() { // I want to be able to use the refThis here } } }

I'm kinda new to VueJS so I was hoping to get some help. I'm currently returning an array of json objects from a PHP file.

Example:

<?php /* Returns an array similar to this: [ {name: 'foo'}, {name: 'bar'}, {name: 'banana'} ] */ echo json_encode(array_values($array)); ?>

And I'm appending this array of objects to an already existing array of objects in Vue:

axios.post('http://localhost/get_array.php').then(response => { // Append returned array to already existing array for (var i = 0; i <= response.data.length - 1; i++) { this.existingArray.push(response.data[i]) } }).catch(e => { console.log("Error") })

Right now I'm appending the data with a for loop but I was wondering if VueJS has an in-built function that does this automatically without having to use the for loop?

Looking for some help with Vue and WordPress:

I’m trying to get Vue and PHP to talk with each other and having some trouble. Currently, in the project, we’re creating an anchor for each “resource”

<a v-if="resource.pdf_color" :href="resource.pdf_color.url" download class="btn btn-with-icon icon-file-check" data-toggle="tooltip" data-placement="top" title="Color Download"> <label>Color Download</label> </a>

However, we would like to use a WP plugin called “Easy Media Download” to limit number of resources downloaded (we’re trying to minimize members signing for one month to download all materials then canceling service).

I’m trying to figure it out how to be able to call the $url resource.pdf_color.url inside the shortcode do_shortcode( '[easy_media_download url=" $url "]' ) and then bind it to the anchor element inside the href argument. I’ve tried a few things but haven’t had much luck.

Any suggestions or ideas on how to solve this?

how can I call method or mutation in Vuex from watcher?

this.$store is undefined and if I try to call method have error function is not defined?

Code:

watch: { formData: { handler: () => { console.log(this); this.SetStoreForm(); }, deep: true } }

Method:

methods: { SetStoreForm() { this.$store.commit('SetProductForm', this.formData); } }

Thanks

I have a <router-link to = "/ endreco / test">, but I need to perform the same behavior on a vue-material tab, something like this: <md-tab md- icon = "books"> .. to change my route, same as the href = ""

What should I do?

I'm using vue.js, the vue-router to control routes and style with vue-material

this is a part my simple slides demo by vue

<div class="slide" @mouseover="clearinv" @mouseout="runinv" @keydown.39="goto(nextIndex)" @keydown.37="goto(prevIndex)">

Like that, I want to touch the keydown event with left(37) & right(39)

and touch the goto(nextIndex) function,but while I pressing the key, the slide won't listen my keydown event...

I have considered that window.addEventListener('keydown',(e)=>{...}) in the mounted hook, and it can solve this.

But, I think it will be the better solution in Vue.

How can I solve this?

-

this is the full one on CodePen