link2603 link2604 link2605 link2606 link2607 link2608 link2609 link2610 link2611 link2612 link2613 link2614 link2615 link2616 link2617 link2618 link2619 link2620 link2621 link2622 link2623 link2624 link2625 link2626 link2627 link2628 link2629 link2630 link2631 link2632 link2633 link2634 link2635 link2636 link2637 link2638 link2639 link2640 link2641 link2642 link2643 link2644 link2645 link2646 link2647 link2648 link2649 link2650 link2651 link2652 link2653 link2654 link2655 link2656 link2657 link2658 link2659 link2660 link2661 link2662 link2663 link2664 link2665 link2666 link2667 link2668 link2669 link2670 link2671 link2672 link2673 link2674 link2675 link2676 link2677 link2678 link2679 link2680 link2681 link2682 link2683 link2684 link2685 link2686 link2687 link2688 link2689 link2690 link2691 link2692 link2693 link2694 link2695 link2696 link2697 link2698 link2699 link2700 link2701 link2702 link2703 link2704 link2705 link2706 link2707 link2708 link2709 link2710 link2711 link2712 link2713 link2714 link2715 link2716 link2717 link2718 link2719 link2720 link2721 link2722 link2723 link2724 link2725 link2726 link2727 link2728 link2729 link2730 link2731 link2732 link2733 link2734 link2735 link2736 link2737 link2738 link2739

[Vue.js] How can I get these promises to resolve in order Subscribe to RSS

when having issues with firebase promise chains resolving before the entire chain is completed. there is a login and signup modal that displays errors to the user when necessary. I building this with VUEJs

If the error is something like bad email formatting the promise chain works perfectly and displays the correct error message to the user. When the formatting is correct and the request is actually sent to fire base, the .then will fire before the initial firebase promise is fully resolved causing my if in the signup method statement to always resolve to false, and redirecting to /dashboard before the error gets back to the app from firebase.

there is poked at this thing for a few hours now. there is tried reorganizing the promise chain. there is a login in component that is having the exact same behavior.

Here is my method that fires when the signup button is clicked.

computed:{
error () {
return this.$store.getters.error
}
},
methods: {
signup () {
const userProfile = {
userName: this.userName,
firstName: this.firstName,
lastName: this.lastName,
password: this.password,
birthDate: this.birthDate,
address: this.address,
city: this.city,
state: this.state,
zip: this.zip,
email: this.email
}
if (this.email && this.password && this.userName) {
this.$store.dispatch(‘signUserUp’, userProfile)
.then( () => {
if (this.error) {
console.log(this.error)
return this.feedback = this.error.message
} else {
return this.$router.replace(‘/dashboard’)
}
})
} else {
return this.feedback = ‘Please enter all required fields’
}
}
}

This is action in my Vuex store the method dispatches to

signUserUp({commit}, payload) {
commit(‘setLoading’, true)
commit(‘clearError’)
let slug = null
let newUser = {}
let newError = {
test: ‘test’,
message: ‘User Name is already taken, please chose another.’
}
slug = slugify(payload.userName, {
replacement: ‘-‘,
remove: /[$*_=~.()’’!\-:@]/g,
lower: true
})
firebase.database().ref(‘users/‘ + slug).once(‘value’, snapshot => {
if (snapshot.exists()){
console.log(‘name exists’)
commit(‘setError’, newError)
} else {
console.log(‘user does not exist’)
firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
.then(
cred => {
newUser = {
userId: cred.user.uid,
userName: slug,
firstName: payload.firstName,
lastName: payload.firstName,
birthDate: payload.birthDate,
adress: payload.adress,
city: payload.city,
state: payload.state,
zip: payload.zip,
email: payload.email
}
console.log(newUser)
commit(‘setUser’, newUser)
console.log(‘sign up complete’)
firebase.database().ref(‘/users/‘ + slug).set(newUser)
.then( () => {
commit(‘setLoading’, false)
console.log(‘user profile uploaded’)
})
.catch( error => {
console.log(error)
})
}
)
.catch(
error => {
commit(‘setLoading’, false)
commit(‘setError’, error)
console.log(error)
}
)
}
})
}

What when trying to do is check against the database to make sure the username is not already taken. If it has been taken to show the user the the error and stay at the signup form. If not, it to create the new account, upload the profile to my real time database, and then redirect to /dashboard if everything is successful.

This is my first do it 100% myself app, so please be gentle lol.

Thanks for the help!

Solution :

As explained in the documentation, signUserUp should return a promise, in order for to chain it with this.$store.dispatch(‘signUserUp’, userProfile).then(…). Firebase supports promises where possible. It’s possible to chain once() and flatten promise chain with async..await:

async function signUserUp({commit}, payload) {
try {

const snapshot = await firebase.database().ref(‘users/‘ + slug).once(‘value’);

const cred = await firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password);

} catch (error) {
commit(‘setLoading’, false)
commit(‘setError’, error)
}
}

Solution 2:

If you need to wait on the asynchronous code in the action to complete then the action should return a Promise.

Probably the simplest way* to make this work with the current code is to wrap it in a new Promise.

signUserUp({commit}, payload) {
return new Promise(function(resolve, reject) {
/* existing function body */
});
}

Then add calls to resolve() when the asynchronous code has completed. (For example, at this point: console.log(‘user profile uploaded’) or after one of the errors.) Once you call the resolve callback it will invoke the then handler in the signup method. You can reject the Promise as well using the reject callback. In the case however it looks like you want the action to handle the error itself and not propagate it.

*Since it looks like the firebase API uses promises you could also attempt to return the result of the firebase functions.

[Vue.js] Vue.js - calling data() inside mounted() throws error Subscribe to RSS

mounted () {
this.data(); // or only data();
}

message: “this.data is not a function”

What is the best way to call data() after page load?

Solution :

Maybe i don’t know this.data() function,
but just use data like sample below:

<script>
export default {
data() {
return {
foo: ‘bar’,
}
},
mounted() {
console.log(this.foo) // will print “bar”
},
}
</script>

[Vue.js] Click on VUE does not work correctly on component child Subscribe to RSS

I’m working with vue.js and there is a component called Quotation and inside I call another component (child component) called sideBarOptions which is a sidebar that is shown above the parent component with the option to hide it

From sideBarOptions there is a property called conditions set like this: conditions = false and to change it to true with a simple @click but it does not work immediately until I close sideBarOptions and at that moment the @click is triggered.

This is my code:

Quotation.vue

<template>
<sideBarOptions :showSidebar=show @closeSideBar=”closeSideBar”/>
</template>

export default {
data() {
return {
show: false,
}
},
methods: {
closeSideBar(value) {
this.show = value;
},
}
}

sideBarOptions.vue

<template>
<div @click=”conditions = !conditions”>
<input type=”checkbox” id=”box-1”>
<label for=”box-1”>Aceptar</label>
</div>

<div class=”sideBar”>
<a href=”#” class=”closeBtn-send-email” @click=”closeSideBar()”>
<h2>Envar Cotizacin</h2>
<span>X</span>
</a>
</div>
</template>

export default {
props: {
showSidebar: Boolean
},
data() {
return {
conditions: false,
}
},
methods: {
closeSideBar() {
this.$emit(‘closeSideBar’, false);
},
}
}

I dont understand the reason why it changes until I close the child component. Can you help me? Thank you.

Solution :

Try putting the model on the checkbox:

<div>
<input type=”checkbox” id=”box-1” v-model=”conditions”>
<label for=”box-1”>Aceptar</label>
</div>

also multiple elements in one component might be an issue, so wrap it in a div, presuming its just the example.

<template>
<div>
<div @click=”conditions = !conditions”>
<input type=”checkbox” id=”box-1”>
<label for=”box-1”>Aceptar</label>
</div>

<div class=”sideBar”>
<a href=”#” class=”closeBtn-send-email” @click=”closeSideBar()”>
<h2>Envar Cotizacin</h2>
<span>X</span>
</a>
</div>
</div>
</template>

Solution 2:

So far I can see everything works as expected:

if you click form - click on div triggers twice,

if you click div - click on div triggers once

var clickCount = 0;
function mouseDown(){
clickCount++;
}
document.addEventListener(“mousedown”, mouseDown);
new Vue({
components: {
sidebar: {
template: ‘#sidebar’,
data(){
return {
conditions: false
}
},
methods: {
conditionsChange(){
console.log(“do”, this.conditions, clickCount)
this.conditions = !this.conditions
}
}
}
}
}).$mount(‘#app’)
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=”app”>
<sidebar />
</div>

<template id=”sidebar”>
<div @click=”conditionsChange”>
<input type=”checkbox” id=”box-1”>
<label for=”box-1”>Aceptar</label>
</div>
</template>

[Vue.js] How to test a custom directive from another module in a component Subscribe to RSS

there is a UI library that we import into our app. In the UI library is a custom directive, toggle, that we use for opening and closing a modal. When I run unit tests, I get this error:

[vue.js warn]: Failed to resolve directive: toggle

(found in <Identity>)

In my Identity component, I’m using a component from the UI library, checkbox, that incorporates this directive:

<checkbox
:value=”rememberMe”
:label=”$t(‘identity.rememberMeHeading’)”
name=”rememberMe”
data-test=”remember-me”
@input=”toggleRememberMe()”>
<span slot=”subtext”> { $t(‘identity.rememberMeSubheading’) }
<a v-toggle:a-modal=”‘learn-more-modal’”
@click.prevent=”() => {}”>{ $t(‘identity.learnMore’) }</a>
</span>
</checkbox>

How do I fix this error in my Identity.spec.js? After my imports, I have:

const localvue.js = createLocalVue()

localVue.use(Vuex)
localVue.use(‘toggle’)

Solution :

The second parameter of shallowMount and mount accepts a directives property that defines directives to use in the component. You could use this property to declare the v-toggle directive:

shallowMount(MyComponent, {
directives: {
toggle() { /* stub */ }
}
})

For example, to ensure the directive is used in a component:

const toggle = jest.fn()

shallowMount(MyComponent, {
directives: {
toggle
}
})

expect(toggle).toHaveBeenCalled()

[Vue.js] forEach() call fails to compile Subscribe to RSS

The following portion of code compiles correctly with vue.js CLI 2, but within my Nuxt project it doesn’t:

// Populate row with times + total of times at the end of the row
let total = 0
[‘mon’, ‘tue’, ‘wed’, ‘thu’, ‘fri’, ‘sat’, ‘sun’].forEach(day => {
const temp = weekTimes.find(x => x.date === this[day])
if (temp) {
this[day + ‘Time’] = temp.hours
total += parseInt(temp.hours)
} else {
this[day + ‘Time’] = ‘’
}
})

The third line ([‘mon’, ‘tue’…) is associated with the following compiling errors:

Expected indentation of 12 spaces but found 10 Unexpected newline
between object and [ of property access

Unexpected use of comma operator

Expected parentheses around arrow function argument having a body with
curly braces

Yet it’s valid ES6 code, so why does the compiler have a problem with it?

Solution :

The perils of omitting semi-colons.

This:

let total = 0
[‘mon’, ‘tue’].forEach(day => {

will be treated as this:

let total = 0[‘mon’, ‘tue’].forEach(day => {

The 0[…] part will be treated as trying to access a property on the value 0. Try running this example in the browser console:

0[‘toFixed’](2)

This is just a way of calling the toFixed method on the value 0, passing the argument 2.

The comma operator part of the error refers to the ‘mon’, ‘tue’ section. Try typing this in the console:

‘mon’, ‘tue’

While it’s rare to use the comma operator like this you should find that it evaluates to the last value, so ‘tue’ in this case. So, using my earlier example, it’s a bit like this:

0[‘toString’, ‘toFixed’](2)

Here the toString is effectively ignored and it just calls toFixed like in my previous example. Linters will check for such uses of commas as they almost always result from a comma being incorrectly interpreted. As in the case it’s usually intended to be a delimiter within an array rather than the comma operator.

So back to the code, this:

let total = 0
[‘mon’, ‘tue’, ‘wed’, ‘thu’, ‘fri’, ‘sat’, ‘sun’].forEach(day => {

will be trying to access the ‘sun’ property of the value 0, which will be undefined. It will then try to call the forEach method on undefined, which will throw an error.

So while the code is valid it won’t behave as expected. The linter is picking up on these mistakes and trying to help you to fix them.

The simplest solution is to insert a semi-colon.

This warning:

Expected parentheses around arrow function argument having a body with curly braces

is just a linting rule. It expects you to write .forEach(day => { as .forEach((day) => {. There is nothing wrong with the code from a correctness perspective, it really is just a linter imposing a code-style preference.

[Vue.js] How to proxy Vue client to Express server running in docker containers Subscribe to RSS

I’m trying to get a vue.js cli3 app to talk to my node express api running in separate docker containers. Locally, I just add a configuration in vue.config file to proxy my dev server and I’m having trouble trying to mimic this functionality between containers.

Ive set up a dockerfile each for the server and the client and running them from a docker-compose.yml file. The client will run fine but when making a request to the express server, the network tab shows it using port 5001. The server is also running and can be accessed at port 3001.

The functionality I’m trying to replicate in vue.config.js

module.exports = {
devServer: {
port: 5001,
proxy: {
‘/api’: {
target: ‘http://localhost:3001'
}
}
},
}

Client Dockerfile

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY –from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD [“nginx”, “-g”, “daemon off;”]

Server Dockerfile

# develop stage
FROM node:11-alpine as develop-stage
WORKDIR /app/server
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3001

CMD [“npm”, “run”, “start”]

docker-compose.yml

version: ‘3.7’
services:
client:
build: ./
volumes:
- ./:/app
- /node_modules
ports:
- 8080:80
- 5001:80
container_name: client
depends_on:
- api
links:
- api
api:
build: ./server
volumes:
- ./server:/server
- /server/node_modules
ports:
- 3001:3001
container_name: api

nginx.conf

user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main ‘$remote_addr - $remote_user [$time_local] “$request” ‘
‘$status $body_bytes_sent “$http_referer” ‘
‘“$http_user_agent” “$http_x_forwarded_for”‘;
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
upstream rest_api {
server api:3001;
}
server {
listen 80;
server_name localhost;
location / {
root /app;
index index.html;
try_files $uri $uri/ /index.html =404;
}
location /api {
proxy_pass http://rest\_api;
# rewrite ^/api(.*)$ $1 break;
}
}

If it helps, here’s what they look live after running docker compose

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
81e894bf4671 wiley_client “nginx -g ‘daemon of” 3 hours ago Up 3 hours 0.0.0.0:5001->80/tcp, 0.0.0.0:8080->80/tcp client
4941260708b4 wiley_api “docker-entrypoint.s” 3 hours ago Up 3 hours 0.0.0.0:3001->3001/tcp api

I expect any client request at /api to port to 3001 on my server docker container instead of 5001 like it currently is.

Solution :

Ok looks like I was not injecting my nginx.conf file at all so changed Client Dockerfile to

# production stage
FROM nginx:stable-alpine as production-stage
RUN apk add –update –upgrade –no-cache wget
ADD ./nginx.conf /etc/nginx/nginx.conf <– added this line
COPY –from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80

then in nginx.conf, make sure it was pointed to my built index.html file

location / {
root /app/dist; <– add dist here
index index.html;
try_files $uri $uri/ /index.html =404;
}

[Vue.js] How to pass html template as props to Vue component Subscribe to RSS

there is a textarea component that include html tag and to get html in edit mode in this component. I use Laravel to generate html.

<template>
<div>
<textarea
:value=”content”
:name=”name”
:id=”id”>
<slot></slot>
</textarea>
</div>
</template>

In blade page I used to this component:

<my-component>
<p class=”textbox”>hello world</p>
</my-component>

when I put this component in page show me tag <slot></slot> in textarea. What should I do? Do you have any solution for my need?

thanks

Solution :

You need to define a slot. Check official guide on components and content distribution with slots. Also recommend to read this blog how to use it

[Vue.js] Error running npm run unit in Vue.js (babel-preset-stage-2) Subscribe to RSS

I’m a starter with Vue.js and I was trying to make some simple tests with Jest, but since the install of vue.js with Webpack (the first thing I did was try to run the script), I can’t get to run the npm test script.

I tried some tutorials (this and this) to make it run, but I still got the errors.

I searched some issues on Github and it looks like a dependence error, so I tried to install a lot of babel dependencies, changed to everything I could find in the answers, deleted node_modules and installed again several times, but nothing seems to work.

The console log error:

Test suite failed to run

Plugin/Preset files are not allowed to export objects, only functions. In /home/…/node_modules/babel-preset-stage-2/lib/index.js

at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (node_modules/@babel/core/lib/config/config-chain.js:320:26)
at node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (node_modules/@babel/core/lib/config/config-chain.js:120:22)
at loadPrivatePartialConfig (node_modules/@babel/core/lib/config/partial.js:85:55)

Running coverage on untested files…Failed to collect coverage from /home/…/src/utils/ma
ps.js
ERROR: Plugin/Preset files are not allowed to export objects, only functions. In /home/…/node_modules/babel-preset-stage-2/lib/index.js
STACK: Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/…/node_modules/babel-preset-stage-2/lib/index.js
at createDescriptor (/home/…/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/home/…/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/home/…/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/home/…/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (/home/…/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/home/…/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at /home/…/node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (/home/…/node_modules/@babel/core/lib/config/config-chain.js:120:22)
at loadPrivatePartialConfig (/home/…/node_modules/@babel/core/lib/config/partial.js:85:55)

My package.json file:

{
“name”: “luiza-challenge”,
“version”: “1.0.0”,
“description”: “This app makes calls from a API to request address info.”,
“author”: “Bianca Pereira <pereirabi@outlook.com>”,
“private”: true,
“scripts”: {
“dev”: “webpack-dev-server –inline –progress –config build/webpack.dev.conf.js”,
“start”: “npm run dev”,
“unit”: “jest –config test/unit/jest.conf.js –coverage”,
“test”: “npm run unit”,
“lint”: “eslint –ext .js,.vue.js src test/unit”,
“build”: “node build/build.js”
},
“dependencies”: {
“react-scripts”: “^3.0.1”,
“vue”: “^2.5.2”,
“vue-resource”: “^1.5.1”
},
“devDependencies”: {
“autoprefixer”: “^7.1.2”,
“babel-core”: “^6.22.1”,
“babel-eslint”: “^8.2.1”,
“babel-helper-vue-jsx-merge-props”: “^2.0.3”,
“babel-jest”: “^24.8.0”,
“babel-loader”: “^7.1.1”,
“babel-plugin-dynamic-import-node”: “^1.2.0”,
“babel-plugin-syntax-jsx”: “^6.18.0”,
“babel-plugin-transform-es2015-modules-commonjs”: “^6.26.0”,
“babel-plugin-transform-runtime”: “^6.22.0”,
“babel-plugin-transform-vue-jsx”: “^3.5.0”,
“babel-preset-env”: “^1.3.2”,
“babel-preset-stage-2”: “^6.22.0”,
“chalk”: “^2.0.1”,
“copy-webpack-plugin”: “^4.0.1”,
“css-loader”: “^2.1.1”,
“eslint”: “^4.15.0”,
“eslint-config-standard”: “^10.2.1”,
“eslint-friendly-formatter”: “^3.0.0”,
“eslint-loader”: “^1.7.1”,
“eslint-plugin-import”: “^2.7.0”,
“eslint-plugin-node”: “^5.2.0”,
“eslint-plugin-promise”: “^3.4.0”,
“eslint-plugin-standard”: “^3.0.1”,
“eslint-plugin-vue”: “^4.0.0”,
“extract-text-webpack-plugin”: “^3.0.0”,
“file-loader”: “^1.1.4”,
“friendly-errors-webpack-plugin”: “^1.6.1”,
“html-webpack-plugin”: “^2.30.1”,
“jest”: “^24.8.0”,
“jest-serializer-vue”: “^0.3.0”,
“node-notifier”: “^5.1.2”,
“optimize-css-assets-webpack-plugin”: “^3.2.0”,
“ora”: “^1.2.0”,
“portfinder”: “^1.0.13”,
“postcss-import”: “^11.0.0”,
“postcss-loader”: “^2.0.8”,
“postcss-url”: “^7.2.1”,
“rimraf”: “^2.6.0”,
“semver”: “^5.3.0”,
“shelljs”: “^0.7.6”,
“uglifyjs-webpack-plugin”: “^1.1.1”,
“url-loader”: “^2.0.0”,
“vue-jest”: “^1.0.2”,
“vue-loader”: “^13.3.0”,
“vue-style-loader”: “^3.0.1”,
“vue-template-compiler”: “^2.5.2”,
“webpack”: “^3.6.0”,
“webpack-bundle-analyzer”: “^3.3.2”,
“webpack-cli”: “^3.3.3”,
“webpack-dev-server”: “^2.9.7”,
“webpack-merge”: “^4.1.0”
},
“engines”: {
“node”: “>= 6.0.0”,
“npm”: “>= 3.0.0”
},
“browserslist”: [
“> 1%”,
“last 2 versions”,
“not ie <= 8”
]
}

And my .babelrc file:

{
“presets”: [
[“env”, {
“modules”: false,
“targets”: {
“browsers”: [“> 1%”, “last 2 versions”, “not ie <= 8”]
}
}],
“stage-2”
],
“plugins”: [“transform-vue-jsx”, “transform-runtime”],
“env”: {
“test”: {
“presets”: [“env”, “stage-2”],
“plugins”: [“transform-vue-jsx”, “transform-es2015-modules-commonjs”, “dynamic-import-node”]
}
}
}

Solution :

Have a look into vue-cli and see if the tests work on a new install, it looks like you have a Babel problem you are using old Babel ‘babel-core’. If you want a quick way to get vue.js up and running try codesandbox.io.

Also you might want to edit you post as you have posted the email in the package.json file

Solution 2:

Looks like you don’t have correctly installed babel. You must delete the node_modules folder and install the latest babel version runing npm install or yarn install. Then try to run npm run unit again. The best solution is using vue.js CLI in this page you can find the vue.js babel configuration manual vue.js Babel config. Babel plugin on github

[Vue.js] How to add a vue data binding to a dynamically created element Subscribe to RSS

In my code I create a lot of elements dynamicly on serverside, store the html of these elements in a javascript object,remove them and dynamicly/conditionally add them to different parts of the page.

For one particular element a data binding, such that I can refer to that binding in a v-if directive. However, if I add the v-bind on the server side, it gets lost after I copy the html.

Since I do only add the elements in my javascript code, I can not register the v-bind in my template. Neither can I provide the content in a component, since it is not static but relys on the input from the server.

How do I register the binding?

Sample Code:

Dynamicly generated form elements (server side):

<div id=”archive” style=”display: none;”>
<div><input type=”text” name=”purpose” v-bind:value=”purpose” id=”id_purpose”></div> <!– v-bind has no effect –>
<div><input type=”text” name=”purpose__iexact” id=”id_purpose__iexact”></div>
<div><input type=”text” name=”purpose__contains” id=”id_purpose__contains”></div>
<div><input type=”text” name=”purpose__icontains” id=”id_purpose__icontains”></div>
<div><input type=”text” name=”purpose__in” id=”id_purpose__in”></div>

</div>

Code to copy the html:

var input = {};
var archive = document.getElementById(‘archive’);
for(var i = 0; i < archive.children.length; i++) {
var div = archive.children[i];
input[div.firstChild.name] = div.innerHTML
}
archive.parentNode.removeChild(archive);

Template code to display a certain input field dynamicly (client side):

<div class=”inline” v-html=”input[SOME CONDITIONAL COMPUTATIONS]“></div>

Solution :

the correct way to rendering vue.js scene is:

<template>
<div>
<input type=”button” value=”Add new item” @click=”addItem”>
<hr>
<div v-for=”(item,index) in data” :key=”index”>
<span v-html=”item.html”></span>
<h3>Model data {item.model}</h3>
<input type=”text” v-model=”item.model”>
<input type=”button” value=”Click me” @click=”item.action(index)”>
<input v-if=”item.show” type=”button” value=”Remove me” @click=”removeItem(index)”>
</br>
</div>
</div>
</template>

<script>

export default {

data() {
return {
item: {
model: “”,
show:true,
html: “<b>mydata html</b>”,
action: function(index) {
console.log(`Clicked ${index} element.`);
}
},
data: [
{
model: “”,
show:false,
html: “<b>mydata html</b>”,
action: function(index) {
alert(`Clicked ${index} element.`);
console.log(`Clicked ${index} element.`);
}
},
{
model: “”,
show:true,
html: “<b>mydata html</b>”,
action: function(index) {
alert(`Clicked ${index} element.`);
console.log(`Clicked ${index} element.`);
}
}
]
};
},
methods: {
addItem() {
let item = Object.assign({}, this.item); // other way dublicating Observer
this.data.push(item);
},
removeItem(index){
this.data.splice(index,1)
}
}
};
</script>

You can add a show boolean prop to item object and v-if=”” atribut to div to hide it.
I hope this example will help you.

[Vue.js] How to make @babel/plugin-proposal-private-methods work in the vue.js webpack template? Subscribe to RSS

there is an app based on a vue.js webpack template. I needed to use the syntax of private fields and private methods of classes. For this, I installed @babel/plugin-proposal-private-methods ^7.4.4 and @babel/core^7.0.0. After installing the packages, I tried to build a development version, but I got the following errors.

Webpack version is ^3.6.0, vue.js ^2.6.10, babel-core ^6.22.1, babel-preset-env ^1.3.2.

ERROR in ./assets/main.js
Module build failed: Error: Requires Babel “^7.0.0-0”, but was loaded with “6.26.3”. If you are sure you have a compatible version of @babel/core, it is likely that something in the build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn’t mention “@babel/core” or “babel-core” to see what is calling Babel.

Solution :

It looks like you are loading @babel/core@7.X.X with babel 6.

In other words you are calling the core compiler of babel seven with the api of babel 6.

Releasing babel 7, the babel team went on a major revamp and it’s great but not retro compatible.

the template was probably working with babel 6 and you need some babel 7 plugin. So to sum ip up you’ll have to:

upgrade all the babel dependencies (cli, core, plugins, presets …)
update the babel config
replace the deprecated
probably upgrade the webpack babel loader or at least fix the webpack conf

I highly encourage you to read the official upgrading documentation:
https://babeljs.io/docs/en/v7-migration
You also might want to upgrade webpack.

cheers