link2055 link2056 link2057 link2058 link2059 link2060 link2061 link2062 link2063 link2064 link2065 link2066 link2067 link2068 link2069 link2070 link2071 link2072 link2073 link2074 link2075 link2076 link2077 link2078 link2079 link2080 link2081 link2082 link2083 link2084 link2085 link2086 link2087 link2088 link2089 link2090 link2091 link2092 link2093 link2094 link2095 link2096 link2097 link2098 link2099 link2100 link2101 link2102 link2103 link2104 link2105 link2106 link2107 link2108 link2109 link2110 link2111 link2112 link2113 link2114 link2115 link2116 link2117 link2118 link2119 link2120 link2121 link2122 link2123 link2124 link2125 link2126 link2127 link2128 link2129 link2130 link2131 link2132 link2133 link2134 link2135 link2136 link2137 link2138 link2139 link2140 link2141 link2142 link2143 link2144 link2145 link2146 link2147 link2148 link2149 link2150 link2151 link2152 link2153 link2154 link2155 link2156 link2157 link2158 link2159 link2160 link2161 link2162 link2163 link2164 link2165 link2166 link2167 link2168 link2169 link2170 link2171 link2172 link2173 link2174 link2175 link2176 link2177 link2178 link2179 link2180 link2181 link2182 link2183 link2184 link2185 link2186 link2187 link2188 link2189 link2190 link2191

[Vue.js] How to reload or refresh component without reload the page in vue js

there is two component, component A and component B there is one button in component in A, when i click on button A to reload or refresh component B .How this is possible in vue.js js , when using vue.js js 2.o

Solution :

On click you should call a method that calls the component B in the DOM by using this.$refs.componentB

Solution 2:

Try to use :key for component. Whenever key is changed component will be reloaded.

You can read about that on this link

Good luck!

[Vue.js] How to make Vue auto-instantiate components on init?

I’m new to Vue, I’m doing some tests.

Vue.component(‘area-selectors-box’, {
template: `
<div class=”selectors-box”>
<select v-for=”select in selects”>
<option>test</option>
</select>
</div>
`,
props:[‘selects’]
});

var dealer_manager = new Vue({
el: ‘#dealers-main-box’
,data:{
dealers:[],
selects:[{name:’select-1’},{name:’select-2’}]
}
,mounted: function(){
}
,created: function(){
}
,methods: {

}
});

…And later in html:

<area-selectors-box></area-selectors-box>

But it will only output <div class=”selectors-box”></div>, not the selects.

Why? What am I doing wrong?

Solution :

Thank to @Daniel Danaee, I found out I missed a step. On my html I had to reference the binded property like this:

<area-selectors-box v-bind:selects=”selects”></area-selectors-box>

[Vue.js] No 'Access-Control-Allow-Origin' header is present error for some requests but not others

there is a VueJS app running on S3 that is served by a Flask-powered API running on AWS Elastic Beastalk.

The problem

When making some requests, I get the following:

Access to XMLHttpRequest at ‘https://api.myflaskapi.net/blueprint/get\_info?date=2019-01-01' from origin ‘https://app.myvuejsapp.net' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

What I’ve done so far

In my __init__.py file, initialized by the app factory in Flask there is set CORS(app, support_credentials=True) as the example on this link. With that, I would hope that basically any request would have the CORS heading, so I wouldn’t have any policy blocking my frontend requests.

The ideal scenario would be to only allow requests from https://app.myvuejsapp.net, so I tried using CORS(app, support_credentials=True, origins=[‘https://app.myvuejsapp.net'\]) but also without success.

I’ve also tried making one CORS instance for each of my blueprints with CORS(myblueprint) for each .py route file (there is one for each blueprint), also without success.

The strange thing is, I do have one function on vue.js that runs when the app is mounted that works just fine. I can’t see any difference between this and other functions that won’t work.

Example of working function (returns true or false from the backend):

checkDB() {
const path = this.base_url + ‘blueprint/check_db’
axios.get(path, this.token)
.then(checkupd => {
this.isupdated = Boolean(checkupd.data);
if (this.isupdated == true) {
this.update_msg = “Database up to date.”
this.loading = false
this.finished = true
} else {
this.update_msg = “WARNING: Check DB status.”
}
})
.catch(error => {
console.log(error)
})
},

Example of non-working function (returns a XLS from the backend):

getSalesFrom(file) {
const fs = require(‘fs’)
const FileDownload = require(‘js-file-download’);
const path = this.base_url + `blueprint/get_sales?date=${this.date}`
axios.get(path, {
headers:
{
“X-Access-Token”: “mytoken”,
“Content-Type”: “application/json”
},
responseType: ‘blob’
})
.then(response => {
const content = response.headers[‘content-type’];
download(response.data, ‘text.xlsx’, content)
})
.catch(error => {
console.log(error)
})
this.export_dialog = false
}

S3 CORS Configuration XML

<?xml version=”1.0” encoding=”UTF-8”?>
<CORSConfiguration xmlns=”http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
<AllowedHeader>Content-Length</AllowedHeader>
<AllowedHeader>Access-Control-Allow-Origin</AllowedHeader>
<AllowedHeader>X-Access-Token</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Any ideas on what I might be doing wrong?
I’ve been reading for a while, but can’t seem to find a solution for what it seems a pretty simple problem… Maybe I should mess with the S3 bucket permission configuration?

Thanks.

Solution :

Any time you run into a case where youre seeing a No ‘Access-Control-Allow-Origin’ header is present message for some requests but not others, use the Network pane in browser devtools to check the HTTP status code of the response.

Almost always what youre going to find is that the HTTP status code in those cases is a 4xx or 5xx error instead of the expected 200 OK success response.

The only reason you see the No ‘Access-Control-Allow-Origin’ header is present message is those cases is, the Access-Control-Allow-Origin header typically isnt going to get added to 4xx and 5xx errors. Part of the reason is, in the 5xx case especially, the cause can be a server failure that occurs before the server ever gets around to running the application code. Along with that, most servers by default wont add application-set response headers to 4xx and 5xx errors; instead by default they only add them to 2xx success responses.

So anyway, what you want to do is, look at the server logs on the server side (for the server youre sending the request to) and see what messages the server is logging about the cause of whatever problem it is that makes the server end up sending that 4xx or 5xx error response.

Solution 2:

As I understand correctly you host the Vue.js application from S3.

You need to include CORS headers in the S3 buckets. Without them the browser will block all requests to the Flask application. You are making requests to api.myflaskapi.net from app.myvuejsapp.net so you need configure CORS in app.myvuejsapp.net.

You can read documentation how to set CORS in S3 here and here.

To configure the bucket to allow cross-origin requests, you create a CORS configuration, which is an XML document with rules that identify the origins that you will allow to access the bucket, the operations (HTTP methods) that will support for each origin, and other operation-specific information.

You can add up to 100 rules to the configuration. You add the XML document as the cors subresource to the bucket either programmatically or by using the Amazon S3 console. For more information, see Enabling Cross-Origin Resource Sharing (CORS).

[Vue.js] VueJS mutating od duplicate v-model ( value, @input)

there is a problem with using the v-model in my own component. Namely, I dont want to use State or Bus.
At present, the component returns the single value correctly in App.js, it duplicates itself.
I can not deal with it, please help and explain me the problem.

Thanks a lot!

App.js:

<template>
<b-container>
<SectionSelector :AddSection=”AddSection”/>
<component
v-for=”(section, index) in sections”
:key=”index”
:is=”section.type”
:sectionIndex=”index”
:sectionData=”section[index]“
@sectionDataEmit=”sectionDataEmit”/>
</b-container>
</template>

<script>
import SectionSelector from ‘./components/SectionSelector.vue’;
import FullText from ‘./components/sections/FullText.vue’;
import FullImage from ‘./components/sections/FullImage.vue’;
import ImageRightTextLeft from ‘./components/sections/ImageRightTextLeft.vue’;
import ImageLeftTextRight from ‘./components/sections/ImageLeftTextRight.vue’;

export default {
data() {
return {
sections: []
}
},
methods: {
AddSection(sectionData) {
this.sections.push(sectionData);
},
updateSection(sectionIndex, sectionData) {
this.sections[sectionIndex] = sectionData;
},
sectionDataEmit(emitData) {
// eslint-disable-next-line
console.log(emitData.position, emitData.content);
this.sections[emitData.position].fields.text = emitData.content;
}
},
components: {
SectionSelector,
FullText,
FullImage,
ImageRightTextLeft,
ImageLeftTextRight
}
}
</script>

SectionSelector.vue:

<template>
<b-row>
<b-dropdown id=”dropdown-1” text=”Select” class=”m-md-2”>
<b-dropdown-item v-for=”(section, index) in sections”
:key=”index”
@click=”PushSection(index)”> { section.type } </b-dropdown-item>
</b-dropdown>
</b-row>
</template>

<script>
export default {
props: [‘AddSection’],
data() {
return {
sections: [
{
type: ‘FullText’,
fields: {
text: ‘’
}
},
{
type: ‘FullImage’,
fields: {
url:’’
}
},
{
type: ‘ImageRightTextLeft’,
fields: {
img: ‘’,
text: ‘’
}
},
{
type: ‘ImageLeftTextRight’,
fields: {
img: ‘’,
text: ‘’
}
}
]
}
},
methods: {
PushSection(index) {
this.AddSection(this.sections[index])
}
}
}
</script>

FullText.vue:

<template>
<b-row>
<h3>Full text { sectionIndex+1 }</h3>
<b-textarea
:value=”sectionData”
@input=”sectionDataEmit”></b-textarea>
</b-row>
</template>

<script>
export default {
props: [‘sectionIndex’, ‘sectionData’],
methods: {
sectionDataEmit(value) {
let emitData = {
position: this.sectionIndex,
content: value
}
this.$emit(‘sectionDataEmit’, emitData)
}
}
}
</script>

At present, the code causes duplication sections.fields.text (visible in the chrome extension Vue)

Solution :

There is a place in the code that uses object[index]=. Do not do that with vue.js data objects. Instead use Vue.set(object, index, value).

updateSection(sectionIndex, sectionData) {
Vue.set(sections,sectionIndex, sectionData);
},

This is based on the rule that vue.js cannot react to new properties added to the object after data is initialized.

[Vue.js] Vue Router - build from JSON

I’m quite new to Vue.js. I’m used to vanilla JavaScript.
I need to be able to generate route paths from a JSON file.
How can I achieve it?

EDIT

For example, say this is my JSON:

[
{
“name”: “Product 1”,
“url”: “product-1”,
},
{
“name”: “Product 2”,
“url”: “product-2”,
}
]

I basically need vue.js Router to redirect URL/product-1 to Product 1’s component (which will be <Product-1></Product-1>), and URL/product-2 to Product 2’s component (<Product-2></Product-2>)

Solution :

Assuming the component’s name is name in the object, we need to match the structure to vue.js Router API.
Thus, we can do as follows:

const myRoutes = [
{
“name”: “Product 1”,
“url”: “product-1”,
},
{
“name”: “Product 2”,
“url”: “product-2”,
}
]

const router = new VueRouter({
routes: myRouters
.map(({name, url})=>({component: name, path: `/${url}`)),
})

[Vue.js] How to fix Warning `getFieldDecorator` will override `value`,so please don't set `value and v-model` directly and use `setFieldsValue` to set it.?

I’m coding a custom validation form component using ant-design-vue

there is changed my code nearly same as the example showed on the official website, but still got warning, the only difference is the example use template to define child component, but I use single vue.js file

//parent component
…some other code
<a-form-item
label=”account”
\>
<ReceiverAccount
v-decorator=”[
‘receiverAccount’,
{
initialValue: step.receiverAccount,
rules: [
{
required: true,
message: ‘need account’,

}
]
}
]“
/>
</a-form-item>
…some other code

//child component
<template>
<a-input-group compact>
<a-select
:value=”type”
@change=”handleTypeChange”
\>
<a-select-option value=”alipay”>alipay</a-select-option>
<a-select-option value=”bank”>bank</a-select-option>
</a-select>
<a-input
:value=”number”
@change=”handleNumberChange”
/>
</a-input-group>
</template>

<script>
export default {
props: {
value: {
type: Object,
default: () => {}
}
},
data() {
const { type, number } = this.value
return {
type: type || ‘alipay’,
number: number || ‘’
}
},
watch: {
value(val = {}) {
this.type = val.type || ‘alipay’
this.number = val.number || ‘’
}
},
methods: {
handleTypeChange(val) {
this.triggerChange({ val })
},
handleNumberChange(e) {
const number = parseInt(e.target.value || 0, 10)
if (isNaN(number)) {
return
}
this.triggerChange({ number })
},
triggerChange(changedValue) {
this.$emit(‘change’, Object.assign({}, this.$data, changedValue))
}
}
}
</script>

I expect everything is fine, but the actual is I got ‘Warning: getFieldDecorator will override value, so please don’t set value and v-model directly and use setFieldsValue to set it.’

How can I fix it? Thanks in advance

Solution :

because when new of ant-design-vue, after one day research, solution is change :value to v-model and remove value props in the child component

<template>
<a-input-group compact>
<a-select
v-model=”type”
@change=”handleTypeChange”
\>
<a-select-option value=”alipay”>alipay</a-select-option>
<a-select-option value=”bank”>bank</a-select-option>
</a-select>
<a-input
v-model=”number”
@change=”handleNumberChange”
/>
</a-input-group>
</template>

[Vue.js] Is there any way to get v-model value in computed property?

there is retrieved the value from the database. to calculate the the data before render and show in the modal (regarding that user). How I can calculate the data for each and every user and show in the modal? I used to calculate the data in v-model like ‘v-model=”2 * item.amount * 0.09”‘. But problem is I can’t calculate summation. It is concatenate. enter image description here

Solution :

Why don’t you use a watcher on item.amount and calculate the amount you want to show in the modal? Or just use a computed to get the right amount

[Vue.js] Vue. How to watch localstorage for changes?

Another script (no vue.js) write some data in localstorage, for example array “links”. But my vue.js app see it only after page reload (because localstorage is not react in vue). How can I watch localstorage for changes and show without reload page?

Solution :

Local storage isn’t really designed for dynamic data that’s constantly updating, but lets assume you can’t control that.

VueJS only watches data in its components, so you can’t use VueJS.

One solution, that isn’t pretty is using setInterval (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) that would run every x seconds and get the value from localStorage.

It’s not pretty or efficient, bu something like

let name = ‘Bergur’
setInterval(function() {
name = localStorage.getItem(‘name’)
}, 5000)

Solution 2:

If you want to see changes in local storage that are made outside the influence, you can poll it.

data() {
return {
lastChange: null,
timer: null
}
},
created() {
let curVal = localStorage.getItem(‘foo’);
this.lastChange = new Date()
this.timer = setInterval(() => {
const newVal = localStorage.getItem(‘foo’);
if (newVal !== curVal) {
curVal = newVal;
// fireEvent, update state, etc
// or update data in the component
this.lastChange = new Date()
}
}, 1000);
},
beforeDestroy() {
cleaInterval(this.timer)
}

[Vue.js] In vue, how do I check if any parent component has subscribed for an event which child is emitting?

there is a component which is sometimes being used as a child of a parent and sometimes it does not have any parent.

This component emits a particular event which either being caught by the parent ( if subscribed) or I would like to handle it by this component itself.

So at run time, How do I programmatically check

if (someone is listening to the event){
let them catch and handle it
}else {
let’s handle it by our own
}

Solution :

This seems like a questionable design, but this allows you to check listeners passed to a component:

this.$listeners;

It returns the parent scope event listeners. See the doc here.

In particular for the use-case:

// To check whether the “myEvent” event is listened to
if (this.$listeners.myEvent){
// let them catch and handle it
} else {
// let’s handle it by our own
}

Solution 2:

You can pass a boolean prop from the parent.

In Parent Component :

<Child :isParent=’true’></Child>

In Child Component :

props : {
isParent : Boolean
},

methods : {
actionEvent : function(){
if(this.isParent){
// Emit event
}
else{
// Take care over here.
}
}
}

[Vue.js] I'm unsure of how to get vue js and charts js to work together. correctly

I’ve hobbled together the below solution as a test however the following escapes me.

In Chart.js in components folder the this.options and this.chartData are undefinied and null respectively.

The chart still draws chartRender(this.chartData,this.options) but all the options are ignored….and just discovered I don’t even need(chartRender) this? odd…
why don’t I need this?

so I could use a little explanation and help as to why I can draw things but it isn’t behaving as expected and I’m not undeerstandng the flow of how the charts are drawn.

https://codesandbox.io/s/vue-template-bq0ol

Solution :

There are two errors in the example and each of them is a “breaking” error.

You’re not passing a JavaScript expression which evaluates to vm’s options to <scatter> component, but a string with the value ‘options’. To pass in the vm.options property, you need to prefix the attribute with a colon (:), which is a shorthand for v-bind::

<scatter :chart-data=”datacollection” :options=”options”></scatter>

the options are incorrectly nested inside their own options property. In other words,

this.options = {
options: {
legend: {
display: true,
position: “bottom”
},
title: {
display: true,
text: “This is the tiitle”
}
}
};

needs to become:

this.options = {
legend: {
display: true,
position: “bottom”
},
title: {
display: true,
text: “This is the tiitle”
}
};

See it working here.